topic Re: Changing the icons in the LayerList Widget in ArcGIS JavaScript Maps SDK Questions

Changing the icons in the LayerList Widget

MichelleStuart — Wed, 13 Mar 2024 16:17:14 GMT

I would really love to use the LayerList widget in my custom js api apps (built using React and Vite), but my clients really don't like the eyeball to indicate if the layer is visible or not. They prefer the checkbox found in the layer list of the web app builder.

I was inspired by this post (https://codepen.io/anon/pen/QovRre?editors=1000#anon-login) and I have tried to change the icon using the css with something like:

.esri-layer-list__visible-icon::before {

content: "\e611";

}

but the eyeball remains, only with a question mark in front of it, like the css is adding an unknown icon.

Does anyone have a suggestion as to how I can replace the eyeball icon in a React app?

Re: Changing the icons in the LayerList Widget

AndreV — Thu, 14 Mar 2024 07:59:09 GMT

Hi, there's a new property for that since 4.29:

https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html#visibilityAppearance

before that version we used !important in css:

.esri-icon-non-visible::before { content: "\e610" !important; } .esri-icon-visible::before { content: "\e611" !important; }

Re: Changing the icons in the LayerList Widget

MichelleStuart — Thu, 14 Mar 2024 12:30:02 GMT

I don't know how I missed that when I was scanning the properties in the documentation. Thank you for kindly pointing the way!