DUPLICATE: Text link with SVG Icon, can not set property at Mobile-first design mode

Bugs
1

Browser: Chrome 110
OS: macOS / Windows / Linux / etc.
URL: Link to a page that illustrates this issue
Video: Short screen recording that illustrates this issue (free tool: jam.dev)

[Please describe this bug in as much detail as possible so we can replicate & debug this bug]

mobile-first design mode
1
add 3 textlink with custom svg icon, set size and fill color at base breakpoint ()
at basepoint mode, set svg icon’s size and fill color, but they can not display propery.

2
21345×1124 108 KB

but it will save the setting to destop(2xl) mode.
3
31349×1130 112 KB

when swith to destop(2xl) mode, svg icon size display is right.
4
42491×1126 150 KB

2

could someone meet this problem ?

3

Hi William,
Thanks so much for your report.

The SVG control isn’t a CSS control, so it’s not working as expected.
The problem has already been reported a long time ago, but, unfortunately, isn’t solved yet:

You can use custom CSS that can be added and adapted per breakpoint:

%root% svg {
  width: 32px;
  height: 32px;
  fill: red;
}

%root%:hover svg {
  fill: green;
}

I’ll close this thread accordingly.

Best regards,
timmse