WIP: Button element: only one SVG fill colour is possible, whether :hover or not

Bugs
1

Browser: Chrome 114
OS: Linux Mint 21.1
URL: https://jeckel-bestattungen.de/
Video: Bricks 1.8.1: button icon can only have one colour, whether :hover or not - YouTube

Steps to Reproduce:

  1. Add a button to a page
  2. Use an SVG as an icon
  3. Give it a fill colour
  4. Activate :hover pseudo class
  5. Set a different fill colour for :hover
  6. Try

When using an SVG as button icon, the fill colour will always be the last selected, whether it was set for :hover or not. It should be possible to set one colour for :hover and another for normal state.

2

You can set fill=“currentColor” and then it will be the text color of the button.
Or give the SVG a class - and use CSS to set color.

May not suit your use case, but it’s a workaround.

3

Hi Matt,
Thanks so much for your report.

The problem has already been reported (inside of a different report):

Best regards,
timmse

4

Good to know, thanks guys! In the meantime, I did indeed work around this via custom CSS. @digismith thanks for mentioning currentColor, I keep forgetting about that :slight_smile:

5

If anyone is looking for the custom CSS to solve this, @timmse mentioned it in the linked thread:

“The simplest temporary solution is to use custom CSS for both the fill and the :hover fill.”

root svg {
  fill: red;
}

root:hover svg {
  fill: green;
}
1 Like
6

Any update on the above issue, Im experincing the same issue but with “Social Icons” element in version 1.9.7.1.

7

Hi Anthony,
We have not yet been able to solve the problem as it requires a major rewrite of the SVG sub-settings code. However, the custom CSS fix mentioned also applies to the icon list element:

root svg {
  fill: red;
}

root:hover svg {
  fill: green;
}