LayerList widget with check boxes

[CynthiaKozma]

I am using Javascript 4.8 and creating a Webmap.  The new LayerList widget shows the eyeball for turning layers off and on.  The older esri/dijits/LayerList used checkboxes.  The checkboxes seemed more intuitive for the general public to use.  Is there anyway to change those eyeballs to checkboxes in a web map? 

[CynthiaKozma · Accepted solution]

I figured this out. By adding this to my CSS file, I was able to get checkboxes.

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

[Noah-Sager]

Feel free to mark this question as answered, even if the answer is your own

[Anonymous User]

I would love to see this in the API https://community.esri.com/ideas/18341-4x-design-make-ui-discoverable#comment-87452 On/Off, with animation, really discoverable. Or perhaps the option to still use check boxes (perhaps "checkbox style: classic" property?) as they are a universal convention; and with a tri-state checkbox (dot in checkbox to communicate some but not all sublayers in a group are on).  I have experienced that users were confused by checkboxes, mostly because sublayers would not auto turn on by default if parent Groups weren't on (a default I recommend for the API) but they find the eyeball less discoverable still. I think since it lacks color and texture, like web 2.0 icons is not widely understood and can be difficult to rapidly discern meaning from or tell each icon apart; with small, monotone line art. Also the eye does not shade when hovered, unlike most control elements, that would probably help a bit. I propose adding color and texture to the eye and increasing icon size or adding checkboxes or On/Off as options.  

[Anonymous User]

Noah Sager‌ this TOC works perfectly. https://demo.cmv.io/  It has partial checkbox and auto-turns on sublayers. It's perfect. I anticipate if you poll users a majority would want this interface:

[Anonymous User]

In the mean time for users looking to fix the layer list and restore check boxes, the solution from another thread worked but I had to add !important to the CSS above, for it to work. https://codepen.io/kevinsagis/full/GRozoKr 

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

[Noah-Sager]

Thank you for the feedback Kevin MacLeod‌. I will share this with the team.

[NilsBabel1]

So this doesn't work for me.  I've added the override with the !important tag to my scss file.  It has no effect.  I'm guessing it is an order issue with how the css files are being imported.  However, I don't have control over that.  Is there another way to override this or some css trick that I'm missing?