Icons in Ignition 8.1.26 are shown with a black background in what seems like a rendering problem when inserted inside a map and any style (for instance a border) is temporarily added.
Once the icon has turned to black because of the style even removing the style doesn't fix the background to the original "coloured" one.
Below an example of the before and after:
What are the styles being applied by the button style class?
The black color in use is not being used by the Icon, rather, it is being used by the File Upload's "button". The File Upload is displaying as a button because the dimensions of the component are such that it is rendering in its "small" layout, where it is just a button with an icon. As suggested by the questioning of @lrose , you should examine the styling you have in place within the button Named Style you have created.
Hi, sorry I changed the screenshot and created a proof of concept with a map and an icon over it.
Please don't retroactively replace screenshots, as now the helpful comments appear nonsensical as the screenshot they referenced no longer exists; new information or examples should be placed as new comments.
What version of Ignition are you using? I don't see the same behavior in the newest versions, but I do remember a behavior like this occurring in the last couple of years.
Yeah sorry, the original question made no sense as it was formulated so I updated it.
I have the following behaviour in Ignition 8.1.26
Do you have any custom theming applied, or rules defined in the stylesheet.css resource? I don't see the same behavior, even in 8.1.26.
The best way to check is to actually examine this behavior in the browser session by inspecting the offending icon. Right-click it and select Inspect. Verify the <svg> element is selected within the Elements tab (if not, Inspect the icon again). The Styles tab will convey exactly what color is being applied to the icon, and which rule/source the color is originating from.
To reproduce it in the browser make a button which onclick changes the border to solid (see screenshot).
Basically to reproduce it you have to change the style of the icon dynamically, once changed the icon becomes black.
I have not applied any particular style to my project, it is vanilla and a simple change of a style of the icon triggers the problem.
Ah, okay, I see what you're seeing in 8.1.26, though I still don't see it in 8.1.29. I'll investigate when I have time later today.
The screenshots in your original post don't have backgrounds on the icons. I see one with black fill color and another with blue fill and black border.
