Using custom icon in the Expand widget in ArcGIS SDK JS?

Question

Using the Expand Widget in ArcGIS Maps SDK for JavaScript, how can I specify a custom icon (eg an SVG or PNG image) rather than the Esri Calcite icons?

The expandIcon parameter only accepts a string which should match the name of a Calcite Icon (eg "layers"). I wish to use my own icon instead:

const bgExpand = new Expand({
  view: view,
  content: basemapGallery,
  expandIcon: 'https://i.imgur.com/ESUiDwT.png'
});

However, this has no effect and the icon is blank.

The expandIconClass looks as though it could be used to override this with an icon specified in CSS, but this is now deprecated.

How can I manually choose the icon shown in the Expand widget?

Answer 1

One possible solution is to use purely CSS, so there's no need for for hacks like layerList.classList.add("iconLayerList").

The below CSS works for the above simple case (more complex selector might be necessary with complex maps):

div[title=Layers] calcite-icon {
  background-image: url('https://i.imgur.com/ESUiDwT.png');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
}

JS part stays unchanged:

const layerListExpand = new Expand({
    view: view,
    expandTooltip: "Layers",
    expandIcon: '',
    content: new LayerList({
      view: view,
    })
});

view.ui.add(layerListExpand, "top-right");

Answer 2

I came up with a very hacky workaround to make it work. I'd love to know if someone knows of a better approach.

Firstly, add the expand widget with an empty icon and use the expandTooltip property to set its title:

const layerListExpand = new Expand({
    view: view,
    expandTooltip: "Layers",
    expandIcon: '',
    content: new LayerList({
      view: view,
    })
});

// Add the expand instance to the ui
view.ui.add(layerListExpand, "top-right");
  

Then add a class to the expand button. I'm using a timeout as there doesn't seem to be an event fired when the widget is added:

// add a class to the expand widget
setTimeout(() => {
    const layerList = document.querySelector('.esri-widget--button[title="Layers"]');
    if (layerList){
      layerList.classList.add("iconLayerList")
    }
}, 500);

This means you can use CSS to apply the image:

.esri-widget--button {
  background-color: #000 !important;
  border: 1px solid #e9e9e9;
}

.esri-expand__container:not(.esri-expand__container--expanded) .esri-expand__panel .esri-widget--button.iconLayerList{
  background-image: url('https://i.imgur.com/ESUiDwT.png');
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
}

Demo at https://codepen.io/slead/pen/qBLJQZL