I have trying to use svgs with the xlink:href property and it does not show up. If I try it on a completely fresh project, it works fine. I've also tried it on a fresh angular2 webpack project to see if it was related to angular2 but it worked perfectly there as well.
I have this included in the top of my component (I've also tried to place it in the index.html file).
<svg style="display:none">
<symbol id="Icon-Gplus" viewBox="0 0 256 256">
<title>Gplus icon</title>
<path d="M80.6 111.8v27.6h45.7c-1.8 11.9-13.8 34.8-45.7 34.8-27.5 0-50-22.8-50-50.9s22.5-50.9 50-50.9c15.7 0 26.1 6.7 32.1 12.4l21.9-21.1c-14.1-13.1-32.3-21.1-54-21.1C36.1 42.6 0 78.7 0 123.3s36.1 80.6 80.6 80.6c46.5 0 77.4-32.7 77.4-78.8 0-5.3-.6-9.3-1.3-13.4H80.6v.1zM253.4 111.8h-23v-23h-23v23h-23v23h23v23h23v-23h23"></path>
</symbol>
</svg>
If I try this, no svg shows up. It is worth noting that the box for it appears to be there, but no amount of fill change can get it to be visible.
<svg viewBox="0 0 256 256">
<use xlink:href="#Icon-Gplus"></use>
</svg>
If I do this, it works great.
<svg viewBox="0 0 256 256">
<path d="M80.6 111.8v27.6h45.7c-1.8 11.9-13.8 34.8-45.7 34.8-27.5 0-50-22.8-50-50.9s22.5-50.9 50-50.9c15.7 0 26.1 6.7 32.1 12.4l21.9-21.1c-14.1-13.1-32.3-21.1-54-21.1C36.1 42.6 0 78.7 0 123.3s36.1 80.6 80.6 80.6c46.5 0 77.4-32.7 77.4-78.8 0-5.3-.6-9.3-1.3-13.4H80.6v.1zM253.4 111.8h-23v-23h-23v23h-23v23h23v23h23v-23h23"></path>
</svg>
I'm not sure what else to debug right now. How can I reference the svg somewhere outside of my main html code?
