title: How to Change SVG color in SCSS using currentColor
body: <p>How can user the currentColor to fill the svg? i want to use the current element color in the svg background like this:</p>
  
  <pre><code>.icon {
   color:bleu;
  &amp;::after {
      content: '';
      display: inline-block;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 15" fill="currentColor"&gt; &lt;polygon points="9 14 1 14 1 1 9 1 9 4.5 10 4.5 10 0 0 0 0 15 10 15 10 10.5 9 10.5 9 14"&gt;&lt;/polygon&gt; &lt;polygon points="14.708 3.146 14.011 3.854 17.113 7 4.5 7 4.5 8 17.113 8 14.011 11.146 14.708 11.854 19 7.5 14.708 3.146"&gt;&lt;/polygon&gt; &lt;/svg&gt;');
      width: 19px;
      height: 15px;
      margin-left: 14px;
      position: absolute; // hide underline on hover
      top: 2px;
  
  }
  
  &amp;:focus {
      &amp;::after {
          position: inherit; // show border on focus and save the top position
      }
  }
  
  &amp;:hover {
      color:red;
      &amp;::after {
          background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 15" fill="currentColor"&gt; &lt;polygon points="9 14 1 14 1 1 9 1 9 4.5 10 4.5 10 0 0 0 0 15 10 15 10 10.5 9 10.5 9 14"&gt;&lt;/polygon&gt; &lt;polygon points="14.708 3.146 14.011 3.854 17.113 7 4.5 7 4.5 8 17.113 8 14.011 11.146 14.708 11.854 19 7.5 14.708 3.146"&gt;&lt;/polygon&gt; &lt;/svg&gt;');
      }
  }
  }
  </code></pre>
  
  <p>Any ideas?</p>