title: SVG Fill not being applied in FireFox
body: <p>I can't seem to figure out why Firefox is using the default svg fill color instead of the class's fill.</p>
  
  <p>Here are the 3 fills when viewing the FF inspector: </p>
  
  <p><img src="https://i.stack.imgur.com/eeyKQ.png" alt="CSS"></p>
  
  <p>SVG is being inserted via</p>
  
  <pre><code>&lt;svg class="icon"&gt;
      &lt;use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#menu-bag"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>It should be showing the .skip-link .icon fill of white (#fff) but it's actually using the SVG fill of #002649; If i change .skip-link .icon to .skip-link svg then it works fine. Why can I not use a class and instead but explicitly state the element??</p>
  
  <p>Am I missing something obvious about how Firefox fills an SVG? This CSS works fine in other browsers.</p>