topic Re: WAB Developer Edition Widget Icon Color in ArcGIS Web AppBuilder Questions

WAB Developer Edition Widget Icon Color

NathanHeickLACSD — Wed, 30 Jan 2019 02:51:51 GMT

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.

Re: WAB Developer Edition Widget Icon Color

RobertScheitlin__GISP — Sun, 12 Dec 2021 00:52:01 GMT

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');
}‍‍‍‍‍‍‍‍

Re: WAB Developer Edition Widget Icon Color

NathanHeickLACSD — Wed, 30 Jan 2019 17:08:02 GMT

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.

Re: WAB Developer Edition Widget Icon Color

RobertScheitlin__GISP — Wed, 30 Jan 2019 17:26:13 GMT

Nathan,

This JS library has support for IE10 and 11

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

Re: WAB Developer Edition Widget Icon Color

NathanHeickLACSD — Wed, 30 Jan 2019 18:11:52 GMT

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.

Re: WAB Developer Edition Widget Icon Color

Grant-S-Carroll — Mon, 04 Feb 2019 23:58:15 GMT

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

Re: WAB Developer Edition Widget Icon Color

NathanHeickLACSD — Tue, 05 Feb 2019 00:19:11 GMT

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!

Re: WAB Developer Edition Widget Icon Color

Grant-S-Carroll — Tue, 05 Feb 2019 00:23:18 GMT

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

Re: WAB Developer Edition Widget Icon Color

Grant-S-Carroll — Tue, 05 Feb 2019 00:25:14 GMT

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

Re: WAB Developer Edition Widget Icon Color

NathanHeickLACSD — Tue, 05 Feb 2019 00:54:02 GMT

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