Mechanics of using a URL for an Icon

What are you trying to do? I have a component that I would like to dynamically set the icon from a prop. I am able to do this with an image; but when I try to do it with an icon, it just display the text instead of the actual icon.

The reason its important to do an icon over an image is so that I can also set the icon color because the color is tokenized and I have a global element that automates Dark mode; so if I can’t use my color token for the svg, then it won’t display properly in dark mode since it would be stuck with a non-dyamic color that doesn’t invert when dark.

What are the reproduction steps? I tried doing it the same way I did it for the image variant. I create a prop that is a text and then set that prop to the dyanmic Image URL within the icon. I even tried adding the prop to a state variant and giving the Image URL the state variant.

Relevant links:

Can you try providing the SVG content as prop instead of the data string?