WAB Developer Edition Widget Icon Color

[NathanHeickLACSD]

What is the best way to change the color of the widget icons in Web AppBuilder?  I am creating a custom theme based off of the Jewelry Box Theme and my header is mostly white.  So, the white icons aren't visible no matter what the opacity is.  I want to find a way to make this work through the theme with CSS or JavaScript.

[RobertScheitlin__GISP]

Nathan,

  In most modern browsers there is the invert filter css rule you can use but I think IE is lacking here:

.icon-node img {
   -webkit-filter: invert(1);
   filter: DXImageTransform.Microsoft.BasicImage(invert='1');
}‍‍‍‍‍‍‍‍

[NathanHeickLACSD]

Yes, it worked in Firefox for me, but I do need IE support.  At the least, it makes it easier for me to see the icons while I am developing my custom theme.  I don't like my current solution, but it will be to switch out the widget icons once I build the app using the custom theme.  I don't like how the theme requires widget modifications to work, but that's the look and feel I want.  I tried using a background color with the secondary color in my color scheme, but it looked weird.

Thanks, Robert.

[RobertScheitlin__GISP]

Nathan,

  This JS library has support for IE10 and 11

GitHub - shekhardesigner/InvertImages: Invert White Images using SVG Filters. 

[NathanHeickLACSD]

What I find weird about this CSS is that when I add it and reload the app in WAB, the reload time goes from very fast to slow.

[Grant-S-Carroll]

Hi Nathan

I've actually created my icons as fonts as this then gives me complete control over the icons, rather than having them tied to a jpg or png, as I was hitting the same issue that you were with different coloured backgrounds and dealing with contrasts. With css I change the colour of the icon pretty easily and the size if I want as well. Its pretty straight forward to create the font, you just then have to add the css classes in to your theme and then what ever is loading your widgets to apply the right class.

For details on how to create the font, have a look here. Create an Icon Font Using Illustrator & IcoMoon — SitePoint 

You do need something that can generate svg's is the only caveat. But the added bonus is that the icon will support a header of any size.

Cheers

[NathanHeickLACSD]

Hi Grant,

That is a smart idea.  Is it possible to use an .svg file for the icons in the first place and override them with CSS?

Thanks for the idea!

[Grant-S-Carroll]

Hi Nathan

I did look at that, but I think the colour for the svg is embedded in the path of the svg and I couldn't change it. It may be possible but I didn't look in to it too much more as I found the font solution.

Cheers

[NathanHeickLACSD]

I was browsing the Internet and I found a few pages regarding this subject.  It's new to me, but it looks doable.

[Grant-S-Carroll]

Sorry, only other thing I would say, is that regarding IE. We have had some situations where we had to get sys admins to adjust group policy for IE to allow users to download fonts, as they were being blocked by IE settings. If you hit that issue let me know and I can dig out the exact fix for that.

Cheers