multiple instances of external svg - svg

Question

I'm trying to use external svg file to link particular element from svg stack to "background-image"/"content" of the button element using #fragment identifier.
i.e.:
Button1 - background-image: url(icons.svg#fragment1);
Button2 - background-image: url(icons.svg#fragment2);
External icons.svg consists tons of fragments and pretty big.
Everything works perfectly in all browsers. However for each button that needs only one particular fragment it loads whole svg. At the end, having (let's say) 10 buttons, I've got 10 loaded instances of the whole svg.
An ideal solution (IMHO) would be to use the tag "use" with "inlined" SVG but as far as I know such combination wont work.
Using URI encoded fragments not a solution for my particular case.
What would be the best approach?

Answer 1

You can avoid using a background image if you use the svg as a child of your button element.
To use different icons for different states, you can add multiple icons and only make them visible depending on the state of the button.
button:hover use.hover,
button:active use.active {
display: inline;
}
button use:not(.default),
button:hover use.default,
button:active use.default,
button:active use.hover {
display: none;
}
<!-- inline your icons -->
<svg display="none">
<symbol id="icon1" viewBox="0 0 30 20">
<ellipse cx="15" cy="10" rx="15" ry="10" />
</symbol>
<symbol id="icon2" viewBox="0 0 30 20">
<rect x="5" y="5" width="20" height="10" />
</symbol>
<symbol id="icon3" viewBox="0 0 30 20">
<path d="M7,17H23L15,3z" />
</symbol>
</svg>
<button style="width:80px;height:30px;">
<svg width="100%" height="100%">
<use class="default" href="#icon1" />
<use class="hover" href="#icon2" />
<use class="active" href="#icon3" />
</svg>
</button>