topic Re: Using Calcite Design System Icons for expandIconClass in ArcGIS JavaScript Maps SDK Questions

Using Calcite Design System Icons for expandIconClass

Dirk_Vandervoort — Sat, 28 Jan 2023 16:40:05 GMT

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: <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

Re: Using Calcite Design System Icons for expandIconClass

GreteSoosalu — Tue, 14 Mar 2023 15:22:09 GMT

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.

Re: Using Calcite Design System Icons for expandIconClass

AnneFitz — Tue, 04 Apr 2023 22:33:23 GMT

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!

Re: Using Calcite Design System Icons for expandIconClass

ColinSullivan — Thu, 05 Sep 2024 14:41:39 GMT

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

Re: Using Calcite Design System Icons for expandIconClass

AnneFitz — Thu, 05 Sep 2024 18:09:25 GMT

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