Using Calcite Design System Icons for expandIconClass

01-28-2023 08:40 AM
New Contributor III


It's well-known that mapview icons for widgets can be gotten from Calcite theme Esri Icon fonts (

Also it'[s well known that Calcite has a plethora of icons:

What I would like to do is use the Calcite Design System Icons for the expandIconClass for an Expand widget. 

For example:

const nodette1 = document.getElementById("slope-slider-container");
let photoFilterExpand = new Expand({
     expandIconClass: <HERE_IS_MY_CUSTOM_ICON_CLASS>,
     expandTooltip: "Slope Map",
     view: sceneView,
     content: nodette1,
sceneView.ui.add(photoFilterExpand, "bottom-left"); 


What I'd like to do is make <HERE_IS_MY_CUSTOM_ICON_CLASS> use the Calcite Design System Icons (and another other icon I make for that matter ;-o).


0 Kudos
1 Reply
Esri Contributor

Hi @Dirk_Vandervoort 

We're looking into it to provide an easy way to use the Calcite icons in the Expand widget.  

Meanwhile, you can try out this workaround to use a custom svg: 

When adding the Expand widget: 

      const bgExpand = new Expand({
        view: view,
        content: basemapGallery,
        expandIconClass: "custom-keyboard-icon"

And in CSS: 

span.esri-collapse__icon.custom-keyboard-icon {
  display: block;
  width: 16px;
  height: 16px;
  content: url(;

Sample app:  

Note: as this is a workaround, the CSS classnames may change in the future. 

0 Kudos