<story><title>Stop Using Icon Fonts</title><url>https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts</url></story><parent_chain><item><author>mablopoule</author><text>Apart from font-icon, a nice way to handle icons in a website is to leverage the underutilized &amp;lt;use&amp;gt; SVG element:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;lt;!-- Should be in all your pages --&amp;gt;
  &amp;lt;svg style=&amp;quot;display: none&amp;quot; aria-hidden=&amp;quot;true&amp;quot;&amp;gt;
    &amp;lt;defs&amp;gt;
      &amp;lt;symbol id=&amp;quot;icon-circle&amp;quot; viewBox=&amp;quot;0 0 20 20&amp;quot;&amp;gt;&amp;lt;circle fill=&amp;quot;currentColor&amp;quot; cx=&amp;quot;10&amp;quot; cy=&amp;quot;10&amp;quot; r=&amp;quot;10&amp;quot; &amp;#x2F;&amp;gt;&amp;lt;&amp;#x2F;symbol&amp;gt;
      &amp;lt;!-- other icons here --&amp;gt;
    &amp;lt;&amp;#x2F;defs&amp;gt;
  &amp;lt;&amp;#x2F;svg&amp;gt;

  &amp;lt;!-- In some other template --&amp;gt;
  &amp;lt;button&amp;gt;
    &amp;lt;svg class=&amp;quot;icon&amp;quot;&amp;gt;&amp;lt;use xlink:href=&amp;quot;#icon-circle&amp;quot;&amp;gt;&amp;lt;&amp;#x2F;use&amp;gt;&amp;lt;&amp;#x2F;svg&amp;gt;
    &amp;lt;span&amp;gt;foobar&amp;lt;&amp;#x2F;span&amp;gt;
  &amp;lt;&amp;#x2F;button&amp;gt;

  &amp;lt;!-- in your CSS --&amp;gt;
  .icon { width: 1em; height: 1em; }
&lt;/code&gt;&lt;/pre&gt;
This approach I feel has most of the advantages of inlined SVG (mostly context-dependent colors) while avoiding most of the clutter, and is not heavily reliant on a specific JS-based workflow (thought we do need to includes our &amp;lt;def&amp;gt; somewhere in all pages)</text></item></parent_chain><comment><author>shubhamjain</author><text>I have tried this, but adding symbols to the file becomes a giant PITA. Then, you also have to ensure that symbols are loaded on every page. I had some SVGs that were multiple kilobytes (logos and stuff), and this just increased the page weight.&lt;p&gt;You can give my library, svg-loader, [1] a try. It&amp;#x27;s a single line of javascript that makes it really easy to load external SVGs as inline elements. The syntax is even shorter and you avoid all the problems of external SVGs.&lt;p&gt;[1]: &lt;a href=&quot;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;shubhamjain&amp;#x2F;svg-loader&quot; rel=&quot;nofollow&quot;&gt;https:&amp;#x2F;&amp;#x2F;github.com&amp;#x2F;shubhamjain&amp;#x2F;svg-loader&lt;/a&gt;</text></comment>
<story><title>Stop Using Icon Fonts</title><url>https://www.irigoyen.dev/blog/2021/02/17/stop-using-icon-fonts</url></story><parent_chain><item><author>mablopoule</author><text>Apart from font-icon, a nice way to handle icons in a website is to leverage the underutilized &amp;lt;use&amp;gt; SVG element:&lt;p&gt;&lt;pre&gt;&lt;code&gt;  &amp;lt;!-- Should be in all your pages --&amp;gt;
  &amp;lt;svg style=&amp;quot;display: none&amp;quot; aria-hidden=&amp;quot;true&amp;quot;&amp;gt;
    &amp;lt;defs&amp;gt;
      &amp;lt;symbol id=&amp;quot;icon-circle&amp;quot; viewBox=&amp;quot;0 0 20 20&amp;quot;&amp;gt;&amp;lt;circle fill=&amp;quot;currentColor&amp;quot; cx=&amp;quot;10&amp;quot; cy=&amp;quot;10&amp;quot; r=&amp;quot;10&amp;quot; &amp;#x2F;&amp;gt;&amp;lt;&amp;#x2F;symbol&amp;gt;
      &amp;lt;!-- other icons here --&amp;gt;
    &amp;lt;&amp;#x2F;defs&amp;gt;
  &amp;lt;&amp;#x2F;svg&amp;gt;

  &amp;lt;!-- In some other template --&amp;gt;
  &amp;lt;button&amp;gt;
    &amp;lt;svg class=&amp;quot;icon&amp;quot;&amp;gt;&amp;lt;use xlink:href=&amp;quot;#icon-circle&amp;quot;&amp;gt;&amp;lt;&amp;#x2F;use&amp;gt;&amp;lt;&amp;#x2F;svg&amp;gt;
    &amp;lt;span&amp;gt;foobar&amp;lt;&amp;#x2F;span&amp;gt;
  &amp;lt;&amp;#x2F;button&amp;gt;

  &amp;lt;!-- in your CSS --&amp;gt;
  .icon { width: 1em; height: 1em; }
&lt;/code&gt;&lt;/pre&gt;
This approach I feel has most of the advantages of inlined SVG (mostly context-dependent colors) while avoiding most of the clutter, and is not heavily reliant on a specific JS-based workflow (thought we do need to includes our &amp;lt;def&amp;gt; somewhere in all pages)</text></item></parent_chain><comment><author>voldemort1968</author><text>Came here to recommend this approach. Lots of FE devs don&amp;#x27;t know about this.&lt;p&gt;Nice overview here too &lt;a href=&quot;http:&amp;#x2F;&amp;#x2F;tutorials.jenkov.com&amp;#x2F;svg&amp;#x2F;use-element.html&quot; rel=&quot;nofollow&quot;&gt;http:&amp;#x2F;&amp;#x2F;tutorials.jenkov.com&amp;#x2F;svg&amp;#x2F;use-element.html&lt;/a&gt;</text></comment>