Changing the icons in the LayerList Widget

[MichelleStuart]

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?

[AndreV · Accepted solution]

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

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

before that version we used !important in css:

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

[MichelleStuart]

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