[Bug-13972,13973]Icon color on buttons

Ignition Early Access
1

I need a little help with the Icon color on buttons. I’m using the material icons on buttons but can’t specify a color for the icon.

I added material/arrow_upward to a button and it’s white. I added material/arrow_downward icon to another button and it’s black
image

To get the icons to show up on the buttons I’ve add an icon property to the image PROPS with ‘color’ and/or ‘style’ but they don’t do anything (I’m showing both in pic but tried them seperately).
image

I’ve tried to just put the icon path in the image:icon:path PROPS but I still can’t get the color to work.
image

Just putting the icon path in the source PROPS doesn’t even load the icon
image

I’m not sure what I’m doing wrong but any advice would be appreciated.

Thank you

2

Did you add properties to your button to have “icon” as an option? I drug a button to my screen and the button has “image” but does not have “icon”. I’m assuming you added it or maybe I’m doing something differently.

I found a work around. If you drag a button onto the form and then drag an icon control onto the form you can adjust color from your icon. You could make a view that has a button with an icon overlayed with it and use instances of that as a template to get your desired functionality.

I didn’t have any problem changing the color of an icon control.

Anyway, that should work as a work around.

3

Just to add on, since I’ve been trying to do the exact same thing: I’ve noticed that in the button style ‘Shape’ fields, there is a Fill and a Stroke option. If you use Stroke, it adds the stroke to the icon (not the button text). If you use Fill, nothing happens. Is it possible that the Fill option should be the background color of the icon but that functionality currently does not exist?

4

Fill color for icons is handled on the “Shape” fill under styles. It sounds like it is overridden by a color binding on the icon itself.

What I’m saying is if you drag an icon onto your form without binding it and change the shape fill style on it you will change the bg color. The line color is handled on the stroke as you noticed.

I’m not certain which properties override each other but it sounds like a binding overrides a shape style. Granted, you can bind a shape style also :slight_smile:

5

Thanks for the input. I guess the work around Steve suggested will do the job, but it’s an odd behavior.

Yes, I did add the icon object to the button PROPS just to see if it would work, and it did.

I tried to add a style to the icon object within the button but it didn’t work either
image

6

Hi,

We have a couple tickets to investigate these issues, and will let you know when we have a fix.

7

It’s been a long time but I just figured out why I have a black arrow_down icon…

I opened the material.svg file and found the svg id “arrow_downward” and discovered a “fill” statement on that icon

	<svg viewBox="0 0 24 24">
		<g class="icon" id="arrow_downward">
			<path fill="#010101" d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
		</g>
	</svg>

Therefore I have a (almost) ‘black’ icon.

2 Likes
8

That’s correct. Further examination revealed 41 other icons which would exhibit the same behavior. I’ve made a note in the ticket to remove that fill property for the offending icons.

9

@cmallonee

Did this bug creep back with version 8.0.13? In version 8.0.12, I was using “material/fiber_manual_record” and changing the color. With version 8.0.13, no matter the color set, it is black.

10

It looks like that particular Icon is indeed now broken. I’ll look and see what happened.

11

Yeah, just verified a “fill=”#010101" statement was added:

8.0.12:

    <svg viewBox="0 0 24 24">
        <g class="icon" id="fiber_manual_record">
            <circle cx="12" cy="12" r="8" />
        </g>
    </svg>

8.0.13

	<svg viewBox="0 0 24 24">
		<g class="icon" id="fiber_manual_record">
			<circle fill="#010101" cx="12" cy="12" r="8" />
		</g>
	</svg>
12

Yeah, I saw that - I’m trying to locate where it was brought into the application, because it had previously been fixed. I’m betting it’s not the only one.

13

Regardless of when it came in, this is obviously now broken in 8.0.13 and newer. I’ve opened a ticket to RE-fix it.

14

In the meantime, is there a process for me to manually edit the file, or at a minimum, pull in the file from 8.0.12? If I edit the files, what is required to execute the change: Gateway Restart, Designer Restart, etc?

15

Replacing the file with the one from 8.0.12 should work and should only require a clearing of the browser cache along with a page refresh I believe.

16

These issues should be fixed in the next nightly release (07 July 2020) and as part of 8.0.15 stable.