How to customize LayerList icon

yangwen

Our design calls for specific designed controls to toggle the feature layers in our map.  As such I need to customize the LayerList widget with specific markup for rendering.

From what I saw in the 4.x JS API, there doesn't seem to be a method or property where I can overwrite the markup of the layerlist widget.  Is this correct? How can I otherwise achieve what I described?

Thanks.

NilsBabel1

Did you ever get this working?  I would like to get the checkboxes instead of the eyeball as well.  I'm using the github styler too to try and create my own theme.  I'm not able to override the css like you mentioned previously.  I think the way my css loads when our application builds ignores the override.  I've gone down the same path as you with the LayerList.scss.  But I found out that the icons is actually stored in the icons/style.scss.  There's also a variables.scss there that style imports that lists $esri-icon-visible.  So in my-theme/main.scss I've tried to do this:

@import "../base/icons/style.scss";

$esri-icon-visible: "\e611";

$esri-icon-non-visible: "\e610";

I've also tried \ue611 with and without quotes.  And also not importing the style file.  But it still doesn't work.  I get a variety of different font errors.  I feel like this is on the right track but it's not quite there.

Any advice Juan Carlos Franco‌ Matt Driscoll‌ ?