Using Calcite Design System Icons for expandIconClass

Question

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=&version=3.19.4 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: , 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 use the Calcite Design System Icons (and another other icon I make for that matter ;-o). TIA

AnneFitz · Answer

Hi Colin,

Specifying the size is not possible at this time. For the component being able to take a direct reference to an icon or image, could you submit an ArcGIS Idea or Enhancement request through support? This will help us track it better!

Thanks,

Anne

ColinSullivan · Answer

Anne,

Is it possible to specify the size of the icon when referencing the calcite icon? Something like "chevron-left-24"? Or could this component be expanded to take a direct reference to an icon like:

import { chevronLeft32 } from '@esri/calcite-ui-icons';

or "someUrl.png"? Thanks, Colin Sullivan

AnneFitz · Answer

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!