[Bug-13972,13973]Icon color on buttons

#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

0 Likes

#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.

0 Likes

#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?

0 Likes

#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:

0 Likes

#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

0 Likes

#6

Hi,

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

0 Likes

#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.

0 Likes