Clarity: Icon 'tag' does not paint with the CSS font color

[clementcur]

Select one ... (check one with "x")

[x] bug
[ ] feature request
[ ] enhancement

Expected behavior

the code below should paint the 'tag' clarity-icon in white.

Actual behavior

the code below paints the 'tag' clarity-icon in black.

Reproduction of behavior

HTML:
<clr-icon shape='tag' class='my-icon'></clr-icon>

CSS:
.my-icon{ color: #fff }

See screenshot attached:

Environment details

• Clarity version:
  0.8.4

[Shijir]

@clementcur, thanks for informing us about this bug. Some icons have fill attribute that's preventing the color style from taking effect.

[mathisscott]

SVG uses fill, not color.

That said, we can make the default 'fill: currentColor' and that should do what you want.

As a workaround until then please use 'fill: #fff' instead of color. Or in addition to it if you want.

[mathisscott]

Since this is working as designed, I removed the bug designation. It's more of an enhancement.

[clementcur]

@mathisscott thx for the tip.
I tried out the fill attribute, but it still does not apply the fill color to that svg icon. Though it's working for some other icons, e.g. 'dashboard'.

So, it looks like the 'tag' icon fill value is ignored and always set to '#231f20'.

[lil-kim]

tags_icons.zip
hi @Shijir I found that my original .svg files were using #231f20 instead of #000000. So you can blame this one on me. 😞 I'm attaching the corrected files with the color set to #000000, in case that helps.

[lil-kim]

tag_single_icon.zip
This problem was found in the singular tag icon as well. Corrected svg files attached. Thanks Shijir!

[Shijir]

@lil-kim it's okay. I have now unit tests that catch these kinds of overlooked parts. 😎

[clementcur]

Thx for the prompt fix!

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.