title: Using an SVG and Apply CSS from Stylesheet
body: <p>So I've browsed several articles and questions here, but no holy grail. </p>
  
  <p>I have an external file <code>icon.svg</code>, and I want to use it in several HTML files and have a different fill and sizes for each use.</p>
  
  <p>I can't use <code>&lt;object&gt;</code> from what I gather since it doesn't allow for styles from CSS sheets unless you reference that sheet from the SVG file itself, which kind of defeats the entire purpose.</p>
  
  <p>The only way I found how to do this is like this:</p>
  
  <pre><code>&lt;svg class="icon"&gt;
       &lt;use xlink:href="icon.svg#symbolid"&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>And the CSS applies. But I can only seem to do it if I add <code>symbol</code> nodes in the SVG file and give them an ID, which I'd rather not do. </p>
  
  <p>Also, could it be that this might be not supported in all major browsers ?</p>
  
  <p>Any way to achieve this ?</p>
  
  <p><strong>Update:</strong></p>
  
  <p>Added tags for javascript/angularjs since the solution was JS based. (see answer)</p>