fontawesome-svg.html

<!-- We were using FontAwesome for our icons, but then found that some clients have blocked the downloading of custom fonts.
To resolve this issue, we had to switch all our fonts to svgs instead.
Someone else has already converted FontAwesome to svgs/pngs, so we started with that repo ( https://github.com/CodeCharmLtd/Font-Awesome-SVG-PNG )
We decided to put our svgs in a sprite sheet and after a decent amount of trial and error, got things working.
Here's a code snippet; hope this helps!
More about this issue at https://github.com/FortAwesome/Font-Awesome/issues/3203
-->

<!-- SVG sprite sheet included once on the page.
It it hidden, but needs to be present so that other svgs can refer to these paths.-->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
    <path id="fa-arrow-up" d="M1675 971q0 51-37 90l-75 75q-38 38-91 38-54 0-90-38l-294-293v704q0 52-37.5 84.5t-90.5 32.5h-128q-53 0-90.5-32.5t-37.5-84.5v-704l-294 293q-36 38-90 38t-90-38l-75-75q-38-38-38-90 0-53 38-91l651-651q35-37 90-37 54 0 91 37l651 651q37 39 37 91z"/>
    <path id="fa-arrow-down" d="M1675 832q0 53-37 90l-651 652q-39 37-91 37-53 0-90-37l-651-652q-38-36-38-90 0-53 38-91l74-75q39-37 91-37 53 0 90 37l294 294v-704q0-52 38-90t90-38h128q52 0 90 38t38 90v704l294-294q37-37 90-37 52 0 91 37l75 75q37 39 37 91z"/>
    <path id="fa-star" d="M1728 647q0 22-26 48l-363 354 86 500q1 7 1 20 0 21-10.5 35.5t-30.5 14.5q-19 0-40-12l-449-236-449 236q-22 12-40 12-21 0-31.5-14.5t-10.5-35.5q0-6 2-20l86-500-364-354q-25-27-25-48 0-37 56-46l502-73 225-455q19-41 49-41t49 41l225 455 502 73q56 9 56 46z"/>
    <path id="fa-expand" d="M883 1056q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23zm781-864v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45z"/>
    <path id="fa-compress" d="M896 960v448q0 26-19 45t-45 19-45-19l-144-144-332 332q-10 10-23 10t-23-10l-114-114q-10-10-10-23t10-23l332-332-144-144q-19-19-19-45t19-45 45-19h448q26 0 45 19t19 45zm755-672q0 13-10 23l-332 332 144 144q19 19 19 45t-19 45-45 19h-448q-26 0-45-19t-19-45v-448q0-26 19-45t45-19 45 19l144 144 332-332q10-10 23-10t23 10l114 114q10 10 10 23z"/>
    <path id="fa-times" d="M1490 1322q0 40-28 68l-136 136q-28 28-68 28t-68-28l-294-294-294 294q-28 28-68 28t-68-28l-136-136q-28-28-28-68t28-68l294-294-294-294q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 294 294-294q28-28 68-28t68 28l136 136q28 28 28 68t-28 68l-294 294 294 294q28 28 28 68z"/>
    <path id="fa-plus" d="M1600 736v192q0 40-28 68t-68 28h-416v416q0 40-28 68t-68 28h-192q-40 0-68-28t-28-68v-416h-416q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h416v-416q0-40 28-68t68-28h192q40 0 68 28t28 68v416h416q40 0 68 28t28 68z"/>
    <path id="fa-minus" d="M1600 736v192q0 40-28 68t-68 28h-1216q-40 0-68-28t-28-68v-192q0-40 28-68t68-28h1216q40 0 68 28t28 68z"/>
</svg>


<!-- Some examples of svgs on the page.
Note that each item requires a different viewBox or it will be slightly mis-sized/mis-centered.
We determined the viewboxes with trial and error.

-->
<svg width="12" height="12" viewBox="192 128 1408 1408">
    <use xlink:href="#fa-plus" fill="#5CB85C"></use>
</svg>
<svg width="12" height="12" viewBox="192 640 1408 384">
    <use xlink:href="#fa-minus" fill="#D9534F"></use>
</svg>
<svg width="12" height="12" viewBox="64 32 1664 1587">
    <use xlink:href="#fa-star" fill="#DD4"></use>
</svg>

why not just <symbol>?