Community

Using Calcite Design System Icons for expandIconClass

662
2
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
2 Replies
GreteSoosalu
by Esri Contributor
Esri Contributor
‎03-14-2023 08:22 AM

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
AnneFitz
by Esri Regular Contributor
Esri Regular Contributor
‎04-04-2023 03:33 PM

Hi @Dirk_Vandervoort - we're adding support for calcite icons in the Expand widget in the upcoming release of the API (version 4.27) through two new properties on the Expand widget, expandIcon and collapseIcon, that accept strings referencing Calcite UI icons. If you want to test out this fix before it heads to production, check out the development version of the API, https://js.arcgis.com/next. Let us know if you have any feedback - thanks!

0 Kudos