WAIT: SVG fill doesnt work with Pseudo-classes

Bugs
1

Browser: Chrome 112
OS: macOS

SVG fill doesn’t work with a pseudo-class :hover

Try to add Fill for SVG without active pseudo and it will be set for pseudo-elements also.

Real-life use case: Button icon color change on hover.

2

Hey @Arvoisa,

thanks for your report.

Could you please provide a small screencast (or anything similar) and explain what you’re trying to achieve and what is not working for you? Having a hard time understanding your setup by reading your explanation.

Thanks,

André

3

I have button, button has SVG icon in it. I have set fill color to #000

I am making :hover for this button. For hover I want to change SVG fill to #FFF. This is currently not possible.

Another example: Streamable

4

Hey @Arvoisa,

thanks for the update. The video helped understanding your use case. So your icon shall have a different color than the button text? Or do you want to “sync” it?

An easy way for now would be some very basic custom CSS on the button:

CleanShot 2023-05-22 at 16.45.08@2x
CleanShot 2023-05-22 at 16.45.08@2x480×772 30.5 KB 

root svg {
  fill: orange;
}

root:hover svg {
  fill: red;
}

Best,

André

5

Yeah, this is a workaround for it.

But shouldn’t this work with just a built-in “pseudo-classes editor”?

6

Hey @Arvoisa,

it works when using an icon from one of the built-in icon sets and setting the icon color using the icon typography setting. The custom SVG option works differently. I’ll check the possibilities and will get back to you when I have more infos.

Best,

André

7

Sure, but for speed its much better to load icons as SVG. No need to load whole font family .

8

Hi, I’m having the same issue when using SVG in Icon list or List elements. Custom CSS works fine in editor mode, but the changes won’t apply on live website. Checked this in Chrome, Firefox and Safari. I set fill color to #fff in SVG options and then I have this CSS code:

root .repeater-item:hover svg{
  fill: #000!important; 
}

Looking for a fix for that. Thank you.