Referencing SVGs with file path in CSS and/or HTML files will spawn additional HTTP requests when loading a page. Including SVGs inside CSS will prevent you from styling them.
We can define SVG elements in separate template, so they won’t clutter other templates. Now we can reference them
icons.handlebarsor whatever templating language you’re using, for defining symbols
Be sure to include
icons.handlebars into your DOM before referencing them. Now we avoided doing
unnecessary requests and because icons are part of the DOM, we can style them with CSS. Double win!
This will color SVG’s fill with the same color that’s set on the element that wraps SVG.
Thanks to my coworker Gregor who found most of these things out.