title: SVG symbols not being displayed in Firefox
body: <p>I'm currently using SVG symbols to display icons. This works in IE, Chrome, and Safari but the icons don't show up in Firefox. There are lots of similar questions on StackOverflow but most of them are older or aren't using symbols.</p>
  
  <p>I'm loading all of the icons in <code>index.html</code> using the following markup:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;svg xmlns="http://www.w3.org/2000/svg" style="display:none"&gt;
      &lt;symbol id="user" viewBox="0 0 64 64"&gt;
          &lt;path d="..."&gt;
      &lt;/symbol&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I then use the symbols like this within my views:</p>
  
  <pre><code>&lt;svg ng-class="type" class="main-nav-icon"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#user"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>With the following css:</p>
  
  <pre><code>.main-nav-icon {
    height: 32px;
    width: 32px;
    cursor: pointer;
  }
  </code></pre>
  
  <p>In Firefox, the svg markup ends up looking like this in the debugger:</p>
  
  <pre><code>&lt;svg class="main-nav-icon" ng-class="type"&gt;&lt;use xlink:href="#user"&gt;&lt;/use&gt;&lt;/svg&gt;
  </code></pre>
  
  <p>But nothing is being displayed (although the spacing is correct meaning a 32px by 32px element is being displayed, it's just empty).  What do I need to do to make this work?</p>
  
  <p>This is what the head of my html looks like:</p>
  
  <pre><code>&lt;!doctype html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"&gt;
      &lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
      &lt;meta name="apple-mobile-web-app-status-bar-style" content="black" /&gt;
      &lt;link rel="shortcut icon" href="favicon.ico" /&gt;
      &lt;link rel="stylesheet" href="/styles/vendor-app.css"&gt;
      &lt;base href="/"&gt;
    &lt;/head&gt;
  </code></pre>
  
  <h2>Updated JsFiddle demonstrating the problem</h2>
  
  <p><a href="http://jsfiddle.net/r7ger34b/2/" rel="nofollow">http://jsfiddle.net/r7ger34b/2/</a></p>
  
  <p>Open the link in Chrome and the icon is displayed.
  Open the link in Firefox and no icon is displayed.</p>