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