I hate icon fonts and use this technique either with SVG sprites (symbols) and icon components.
You could also use sizing in em to reach similar experience as with icon fonts, or just for better flexibility. It's also great that you can override color and size just using CSS.
Interesting, how do you manage your SVG sprites?
And yes indeed, in that case the em sizing would have been more appropriate, thanks for spotting.
Usually, I use SVG icon components when working with Vue or React, but sometimes when I build classic websites (eg. using PHP for rendering) I place all icons in <symbol> tags in hidden <svg> with viewBox property and use currentColor where necessary.
In the end, I have something like this:
<svg style="display: none" xmlns="..." otherReqiuredAttrs="...">
<symbol id="icon-user" veiwBox="0 0 20 20" fill="currentColor" storke="none">
<!-- content of SVG from graphic editor -->
<path d="..." fill="none" stroke="currentColor" />
<!-- Use an icon -->
<use xlink:href="#icon-user" />
For .icon you can use something like this
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.