6 ms·

If you escape the unsafe characters it works everywhere. I've been doing this for ages. Source: https://codepen.io/yoksel/details/JDqvs/ https://codepen.io/yok

• ravenstine 10y ago
  Ah, that's a pretty decent workaround. Though I'm not a fan of putting encoding encoded information into style sheets, I'm not exactly against it either. Though the method I wanted to use would work if it weren't for the existing icons symbols inside of sprites, which seems to be only supported in Firefox's CSS. For example: ``` <svg> <symbol id="helloworld">[... a bunch of paths]</symbol> <symbol id="anothersym">[...]</symbol> </svg> ``` ``` label:before { background: url('/path/to/my.svg#helloworld') no-repeat; } ``` I could, of course, break the icons out of the symbol tags, as done here: https://css-tricks.com/svg-fragment-identifiers-work/ https://css-tricks.com/svg-fragment-identifiers-work/ It's just disappointing that while referencing symbols works just fine with a <use xlink:href> tag, it doesn't work as a CSS url property value. I'm not sure why that would be. EDIT: Yes, I'm sorry, I know this isn't Stack Overflow. Though I think the above(without symbol tags of course) may be the best alternative to pure-CSS icons if your graphics are more complicated.