The icon component in 8.1 doesn't accept css3 fill property in style class

The icon component in 8.1 doesn’t accept css3 fill property in style class.
If I use the fill property in the style section of component property it accepts the color but not in style classes.

In the previous version, this works. If this doesn’t work I don’t have control over hover effect.

The icons’ fill color seems to be based on the text color attribute of a style class, if I remember correctly. I’m not sure if this is intentional or a bug, but it’s weird either way.

1 Like

You are right about it. it is so weird. I hope this is a bug and IA fix it and not intentional.

if you want to use a style, you need to set the props.color to ‘unset’. This will force it to revert to its parent style config

When I set props.color to unset, I get a red triangle saying color: does not match the format for color although the fill property from the style class does apply in that case. Interesting…

It’s only a warning as it doesn’t match Igntion’s expected type (it’s still valid css though), you get that when using css variables as well

At the end svg shape should use fill and not color property and it is bug in 8.1.x

Ah, yes, I missed that part. Still an issue I guess, although if you think about it, icons are used within text which should use the text colour. I guess that got passed onto the icon component itself. Changing it now would probably break everyone’s projects :man_shrugging:

For me it did break my 8.0.x projects :pensive: