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/

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.