Change color of svg used in ::before when :hover on text

Hi everyone, hope you're doin well!

I have the following markup (sorry, but I'm from phone):

<button class="btn--primary-iconlink">
<span>Add option</span>
</button>

And this the css:

.btn--primary-iconlink {
..other styles
&:hover {
color: var(--my-color);
}
}

.btn--primary-iconlink > span::before {
content: url(my-image.svg);
color: inherit;
fill: currentColor;
}

Basically what I want to achieve is, when I hover the button, both the text and svg should change color. But at the moment only the text does.

What I'm doing wrong? Maybe I should put the icon directly in the html instead?

EIO•1/30/24, 3:55 PM

This is a tricky one.
But I'm also sorry to tell you that it's not possible the way you are approaching it.

If you inspect the pseudo element and check what is showing, you'd see that there is no svg on the DOM, just the element.

What really is happening is that the SVG is being rendered as an image.
Which means SVG controls will never affect it.

If you want to change the color, you would have to approach it like you are changing the color of an image.

That's when you would need "devices" like functions.

Something like: