SVG use element not showing paths
<p>I am trying to use SVG sprite technique to display single SVGS when I need them, and calling them via the 'use' element. I know this is slightly tricky because of the shadow DOM, but I can't figure out why my elements are not showing properly.</p>

<p>In my local dev build, which is different than this JSfiddle, the use element actually shows the SVG and the paths, but only as invisible shapes. No fill, or anything. Just invisible paths. I have it structured like this:</p>

<pre><code>&lt;nav class="nav-right"&gt;
    &lt;div class="nav-right-left"&gt;
        &lt;svg class="icon"&gt;
           &lt;use class="icon-menu" xlink:href="#icon-menu"&gt;&lt;/use&gt;
        &lt;/svg&gt;
    &lt;/div&gt;
&lt;/nav&gt;
</code></pre>

<p>The svg class 'icon' shows in the proper place but the use element shows outside of the div and down the page. Could this be because of user agent stylesheet having svg:not(:root) {overflow: hidden;}?</p>

<p>Can anyone look at the JSfiddle and attempt to explain why they are not displaying properly? <a href="https://jsfiddle.net/qs769rk6/" rel="nofollow">https://jsfiddle.net/qs769rk6/</a></p>