Create a Style Class to change the icon color

Ignition
1

Hello, I have this Icon with the following configuration
image

image

And what I intend with my Style Class is to have three different colors for the icon (base color, hover color and disabled color), I read that the Fill option under Shape menu should work to replace the props.color, but is not working for me, not sure what is missing.
image

image

image

2

Good question!

I did a quick test and I think I have it working in Designer.

  1. Instead of specifying the fill color, specify the text color for each of the states.
  2. Manually add the style.classes value property and select your icon style class. (You've already done this.)
  3. Important! Delete the props.color property. This is overriding the style class.

I haven't tested it in a browser.

1 Like
3

Tested in browser, yes the text color style option works for changing the color of the icon!

4

Good.
If you're so inclined you could use the browser's Developer Tools (F12), hit the inspector button in the top left corner and click on the icon. It might give you a clue as to why that works.

5

Thanks for the answers, I have made the changes, instead of Fill I'm using the Text Color, but the icon still don't change, it stays black :slightly_frowning_face:
image

image
image1222×450 31.6 KB

image
image1190×544 37.5 KB

Any other idea why isn't working for me ? Maybe other config i should make or something that is overriding the style.
I appreciate the help :raised_hands:

1 Like
6

You've omitted the hex prefix for the CSS colors.

icon color

Add the "#".

7

ughh, of course. Thanks !!! It works now :slight_smile:

8

Thank you for this answer, the "fill" property worked for me instead of using "color"