title: How to use SVG for icons properly / best practices
body: <p><br><br>I'm looking for an advice about work with SVG images, respectively icons.
  <br><br></p>
  <h1>What I've tried</h1>
  <p>If I'm using PNG icons, the CSS is like:</p>
  <pre><code>elem:after {background: url('icon.png'); ...}
  </code></pre>
  <p>I've tried the same way</p>
  <pre><code>elem:after {background: url('icon.svg'); ...}
  </code></pre>
  <p>but it isn't what I'm looking for. This solution lose advantages of SVG icons (they're small and blured, fuzzy).</p>
  <br>
  <h1>What I have</h1>
  <p>I've generated this code online using Icomoon app.</p>
  <pre><code>&lt;svg aria-hidden=&quot;true&quot; style=&quot;position: absolute; width: 0; height: 0; overflow: hidden;&quot; version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;&gt;
      &lt;defs&gt;
          &lt;symbol id=&quot;icon-love&quot; viewBox=&quot;0 0 33 32&quot;&gt;
              &lt;title&gt;love&lt;/title&gt;
              &lt;path d=&quot;M32.916 15.597c0.604-0.66 ...&quot;&gt;&lt;/path&gt;
          &lt;/symbol&gt; 
          &lt;symbol id=&quot;icon-shop&quot; viewBox=&quot;0 0 34 32&quot;&gt;
              &lt;title&gt;shop&lt;/title&gt;
              &lt;path d=&quot;M17.148 27.977c-...&quot;&gt;&lt;/path&gt;
          &lt;/symbol&gt;
       &lt;/defs&gt;
  &lt;/svg&gt;
  
  &lt;svg class=&quot;icon icon-shop&quot;&gt;
      &lt;use xlink:href=&quot;#icon-shop&quot;&gt;&lt;/use&gt;
  &lt;/svg&gt;
  </code></pre>
  <br>
  <h1>My question</h1>
  <ol>
  <li><p>Is it semantically correct to put icons into HTML markup, instead of putting them into CSS?</p>
  </li>
  <li><p>Across whole website there is about 60 icons, any unique, any are repeated more times. Generated markup above has about 50kB. <br>
  Can I put all icons into general layout template and load them all in whole website, or include just icons I use in the page?
  <br><br>Here I've found <a href="https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement#35126817">How to change color of SVG image using CSS (jQuery SVG image replacement)?</a> (3 years ago), but don't know if it's the right way.</p>
  </li>
  <li><p>How to cache SVG properly? Is it posible when I use it like I'm writing above?</p>
  </li>
  </ol>
  <p>I read many articles, but not definitely sure how to do that best way.</p>
  <p>Thanks for advice.</p>