NO BUG: Button -> Icon -> Custom SVG - Fill color not working

[pauserratgutierrez]

Browser: Chrome Latest
OS: Windows 11
URL: -
Video: -

I created an SVG using Illustrator and saved it with Inline Styles so I can style it using CSS. It works just fine with custom CSS and also with Bricks native SVG element.

The problem comes when using it in a Button element (Button → Icon → SVG (Dropdown)). It remains the default color, can’t be filled with Icon Typography, nor Icon → SVG → Fill.

Adding this CSS to the button makes it work:

%root% svg path {
	fill: white !important;
}

%root%:hover svg path {
	fill: #ee8f2f !important;
}

[timmse]

Hi Pau,
Thanks so much for your report!

However, the problem is probably 99% due to your SVG. Can you make it available to me so I can look at the code?

[pauserratgutierrez]

Absolutely. Here’s my SVGs. It’s strangely working perfectly filling with other bricks elements and only doesn’t work when filled using the button icon options.
https://canquel.pausg.dev/wp-content/uploads/Global-Icons.zip

[timmse]

Hey Pau,
The problem is the inline style within the SVG, which should always be avoided (because, like style tags in general, they are difficult to overwrite, which is why you have to use !important in your custom code).

Instead, you should use “presentation attributes” when exporting, inserting fill or stroke-width as an attribute instead of style. Then everything will work as expected.

You can change the Illustrator SVG export settings here:

[pauserratgutierrez]

Thanks for your response @timmse, I didn’t know that!

Now that’s fixed, but I noticed I cannot set a different fill for the icon of the button on hover because when editing the pseudo-class for hover state the fill I set overrides the default normal fill state of the svg. I still need to use custom CSS %root%:hover svg path { fill: color; }

In addition to that, I also noticed I cannot set a custom width or height for the custom SVG in the button using the icon box options. The size of the custom SVG is overriden by the Button → Style → Typography → Font size

[alexplex]

I’m having the same issue. When using custom SVG’s in buttons, the colors and sizes are not applied. When using the same SVG in an SVG element, the color and sizes work as expected. So it must be something with the button element. I have exported the SVG with Presentation Attributes as @timmse suggested, by the way.

Is it okey for me to reply in old threads? I was googling and found this. The tag says v1-9-4 but this seems still to be an issue in v1-10-3.

[Matej]

Hey @alexplex,

usually, it’s better to open a new thread, but since you asked here, let’s find out what is wrong.
Can you share your SVG file, so I can check locally in the button element and in the SVG element?

Thanks,
M

[alexplex]

Sure, here it is: blackmilk.se/wp-content/uploads/retro-hand-pointing-right-001.svg

But why would it work changing the color and size in a SVG element but not in a button element?

[Matej]

Hey, I can’t access the link, as it says “Kommer snart”

Also, just to confirm, where do you change the color? Do you change it here?

I’ve tried this on the button and on an SVG element, but it works in my case. That’s why I would like to try SVG, to see if it will be any difference.

Best regards,
M

[alexplex]

Oh, I thought the Coming Soon state only worked on pages and not on media files. I tried accessing it in Inkognito mode without being logged in myself and I could view it. Strange. Anyway I disabled “Coming Soon” and you should be able to access the SVG here:
blackmilk.se/wp-content/uploads/hand-test.svg

By the way, it does work fine with Font Awesome icons. So, I guess it must be the SVG, but then again, that SVG works fine when using it in a SVG element.

But it’s not working when using it as an icon.

[Matej]

Hi @alexplex,

thanks for the SVG. I’ve tested it now in both the icon and the SVG field, and it works in both cases.

Can you check on the frontend, if there is some other styling applied to the Icon SVG field, inside your red element?

Best regards,
M

[alexplex]

No, sorry. Tried viewing them on the frontend and custom SVG’s don’t work for me as icons in other elements or in the icon element. They refuse to change colors or sizes. It only works when using custom SVG’s with the SVG element.

[Matej]

Would be possible for you to share a link, so I can see the front end of your page, where you have these two elements?
Best if you can set one next to another, without any other styling.

If the website is not yet public, then you can send it to help@bricksbuilder.io using the email address you used during the purchase, so we can take a look, and a link to this thread.

Thanks.
M

[alexplex]

I was just about to create a test page for you and setting up a button with an icon and it does actually work now. The size and color just didn’t apply to the icon in the builder view but it does actually work on the front end. Sorry to have wasted your time, I’m an idiot

[Matej]

No worries, I’m glad that it works

Best regards,
M