Community

Using Calcite Design System Icons for expandIconClass

142
1
01-28-2023 08:40 AM
Dirk_Vandervoort
by
New Contributor III
‎01-28-2023 08:40 AM

Hello:

It's well-known that mapview icons for widgets can be gotten from Calcite theme Esri Icon fonts (https://developers.arcgis.com/javascript/latest/esri-icon-font/).

Also it'[s well known that Calcite has a plethora of icons: https://developers.arcgis.com/calcite-design-system/icons/?icon=erase&library=Calcite%20UI&query=&ve...

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,
     id:"slope-map-expand"
});
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).

TIA

0 Kudos
1 Reply
GreteSoosalu
by Esri Contributor
Esri Contributor
2 weeks ago

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(https://www1.plurib.us/1shot/2007/grapefruit/grapefruit_final.svg);
}

Sample app: https://codepen.io/gsoosalu/pen/rNZLGqL  

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

0 Kudos