Here you go. You just need to provide the two image files.
go.GraphObject.defineBuilder("SubGraphExpanderImageButton", function(args) {
var button = /** @type {Panel} */ (
go.GraphObject.make("Button",
{ "ButtonBorder.spot1": go.Spot.TopLeft, "ButtonBorder.spot2": go.Spot.BottomRight },
go.GraphObject.make(go.Picture, // the icon
{
name: "ButtonIcon",
source: "expand.png",
desiredSize: new go.Size(12, 12)
},
// bind the Shape.figure to the Group.isSubGraphExpanded value using this converter:
new go.Binding("source", "isSubGraphExpanded",
function(exp, pict) {
var but = pict.panel;
return exp ? "collapse.png" : "expand.png";
})
.ofObject()))
);
// subgraph expand/collapse behavior
button.click = function(e, button) {
var group = button.part;
if (group instanceof go.Adornment) group = group.adornedPart;
if (!(group instanceof go.Group)) return;
var diagram = group.diagram;
if (diagram === null) return;
var cmd = diagram.commandHandler;
if (group.isSubGraphExpanded) {
if (!cmd.canCollapseSubGraph(group)) return;
} else {
if (!cmd.canExpandSubGraph(group)) return;
}
e.handled = true;
if (group.isSubGraphExpanded) {
cmd.collapseSubGraph(group);
} else {
cmd.expandSubGraph(group);
}
};
return button;
});
The GraphObject.click event handler is exactly the same as in the original “SubGraphExpanderButton” definition. The only thing I changed was to replace the Shape with a Picture.