title: Change SVG fill color with <use> tag not working
body: <p>I just want to change the svg fill color and hover color. But I saw this svg attached like this:</p>
  
  <pre><code>&lt;use xlink:href="#search-magnify"&gt;&lt;/use&gt;
  </code></pre>
  
  <p>I think it's referring to this svg somewhere from the website. I just want to change the fill color without editing the original svg. So I tried wrapping it on span with class and style this way.</p>
  
  <pre><code>.icon svg path{
    fill: red;
    color: red;
  }
  </code></pre>
  
  <p>But it's not working at all. Here is the <a href="https://jsfiddle.net/3bfctx9u/" rel="nofollow noreferrer">fiddle</a>. </p>
  
  <p>What am I missing here? Can this not be achieved by css?</p>