title: Use feather icons in CSS before pseudo-element
body: <p>I'm using feather icons in my project and I need to use a symbol of the feather icons sprite in a before pseudo-element. What I tried was to use the icon as a <code>background-image</code> in the CSS. I read online that Views tags in SVG files can be accessed by using <code>url(&quot;path/to/file.svg#viewname&quot;)</code>. Is it possible to use a similar way but to access a symbol in an SVG file?</p>
  <p>What I tried :</p>
  <pre class="lang-css prettyprint-override"><code>p::before {
      content: &quot;&quot;;
      background-image: url(&quot;feather-sprite.svg#search&quot;);
      display: block;
      height: 100px;
      width: 100px;
  }
  </code></pre>
  <p>A sample of the feather icons sprite :</p>
  <pre class="lang-xml prettyprint-override"><code>&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;defs&gt;
          &lt;symbol id=&quot;activity&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;polyline points=&quot;22 12 18 12 15 21 9 3 6 12 2 12&quot;&gt;&lt;/polyline&gt;
          &lt;/symbol&gt;
          &lt;symbol id=&quot;airplay&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path d=&quot;M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1&quot;&gt;&lt;/path&gt;
              &lt;polygon points=&quot;12 15 17 21 7 21 12 15&quot;&gt;&lt;/polygon&gt;
          &lt;/symbol&gt;
          &lt;symbol id=&quot;alert-circle&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;circle cx=&quot;12&quot; cy=&quot;12&quot; r=&quot;10&quot;&gt;&lt;/circle&gt;
              &lt;line x1=&quot;12&quot; y1=&quot;8&quot; x2=&quot;12&quot; y2=&quot;12&quot;&gt;&lt;/line&gt;
              &lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12.01&quot; y2=&quot;16&quot;&gt;&lt;/line&gt;
          &lt;/symbol&gt;
          &lt;symbol id=&quot;alert-octagon&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;polygon points=&quot;7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2&quot;&gt;&lt;/polygon&gt;
              &lt;line x1=&quot;12&quot; y1=&quot;8&quot; x2=&quot;12&quot; y2=&quot;12&quot;&gt;&lt;/line&gt;
              &lt;line x1=&quot;12&quot; y1=&quot;16&quot; x2=&quot;12.01&quot; y2=&quot;16&quot;&gt;&lt;/line&gt;
          &lt;/symbol&gt;
          &lt;symbol id=&quot;alert-triangle&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;path d=&quot;M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z&quot;&gt;&lt;/path&gt;
              &lt;line x1=&quot;12&quot; y1=&quot;9&quot; x2=&quot;12&quot; y2=&quot;13&quot;&gt;&lt;/line&gt;
              &lt;line x1=&quot;12&quot; y1=&quot;17&quot; x2=&quot;12.01&quot; y2=&quot;17&quot;&gt;&lt;/line&gt;
          &lt;/symbol&gt;
          &lt;symbol id=&quot;align-center&quot; viewBox=&quot;0 0 24 24&quot;&gt;
              &lt;line x1=&quot;18&quot; y1=&quot;10&quot; x2=&quot;6&quot; y2=&quot;10&quot;&gt;&lt;/line&gt;
              &lt;line x1=&quot;21&quot; y1=&quot;6&quot; x2=&quot;3&quot; y2=&quot;6&quot;&gt;&lt;/line&gt;
              &lt;line x1=&quot;21&quot; y1=&quot;14&quot; x2=&quot;3&quot; y2=&quot;14&quot;&gt;&lt;/line&gt;
              &lt;line x1=&quot;18&quot; y1=&quot;18&quot; x2=&quot;6&quot; y2=&quot;18&quot;&gt;&lt;/line&gt;
          &lt;/symbol&gt;
          ...
      &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>