title: Styling inline SVG in CSS (eg fill prop)
body: <p>I'm trying to style SVG image putted inline in CSS.
  I will use examples for better understanding the topic.</p>
  
  <p><b>Example 1.</b>
  <em>Inline SVG in HTML - setting color of path via CSS</em></p>
  
  <p>In this example SVG takes color of path from CSS <code>fill: currentColor;</code> property (with means <code>#67809F</code> from <code>body</code> delaration)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    color: #67809F;
  }
  svg {
    background-color: transparent;
    fill: currentColor;
    width: 80px;
    height: 80px
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 448 512"&gt;&lt;path d="M148 288h-40c-7 0-12-5-12-12v-40c0-7 5-12 12-12h40c7 0 12 5 12 12v40c0 7-5 12-12 12zm108-12v-40c0-7-5-12-12-12h-40c-7 0-12 5-12 12v40c0 7 5 12 12 12h40c7 0 12-5 12-12zm96 0v-40c0-7-5-12-12-12h-40c-7 0-12 5-12 12v40c0 7 5 12 12 12h40c7 0 12-5 12-12zm-96 96v-40c0-7-5-12-12-12h-40c-7 0-12 5-12 12v40c0 7 5 12 12 12h40c7 0 12-5 12-12zm-96 0v-40c0-7-5-12-12-12h-40c-7 0-12 5-12 12v40c0 7 5 12 12 12h40c7 0 12-5 12-12zm192 0v-40c0-7-5-12-12-12h-40c-7 0-12 5-12 12v40c0 7 5 12 12 12h40c7 0 12-5 12-12zm96-260v352c0 27-21 48-48 48H48c-26 0-48-21-48-48V112c0-26 22-48 48-48h48V12c0-7 5-12 12-12h40c7 0 12 5 12 12v52h128V12c0-7 5-12 12-12h40c7 0 12 5 12 12v52h48c27 0 48 22 48 48zm-48 346V160H48v298c0 3 3 6 6 6h340c3 0 6-3 6-6z"/&gt;&lt;path fill="#fff" d="M228 292h220v220H228z"/&gt;&lt;path d="M338 302a100 100 0 1 0 0 200 100 100 0 0 0 0-200zm0 181a81 81 0 1 1 0-162 81 81 0 0 1 0 162zm25-42l-34-25c-2-1-2-3-2-4v-66c0-3 2-5 5-5h12c3 0 5 2 5 5v57l27 19c2 2 3 5 1 7l-7 11c-2 2-5 2-7 1z"/&gt;&lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><b>Example 2.</b>
  <em>Inline SVG in CSS - setting color of path via CSS don't work</em></p>
  
  <p>In this example SVG icon is paste to CSS inline, and setting of color path doesn't work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.icon:before {
    content: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20d%3D%22M148%20288h-40c-7%200-12-5-12-12v-40c0-7%205-12%2012-12h40c7%200%2012%205%2012%2012v40c0%207-5%2012-12%2012zm108-12v-40c0-7-5-12-12-12h-40c-7%200-12%205-12%2012v40c0%207%205%2012%2012%2012h40c7%200%2012-5%2012-12zm96%200v-40c0-7-5-12-12-12h-40c-7%200-12%205-12%2012v40c0%207%205%2012%2012%2012h40c7%200%2012-5%2012-12zm-96%2096v-40c0-7-5-12-12-12h-40c-7%200-12%205-12%2012v40c0%207%205%2012%2012%2012h40c7%200%2012-5%2012-12zm-96%200v-40c0-7-5-12-12-12h-40c-7%200-12%205-12%2012v40c0%207%205%2012%2012%2012h40c7%200%2012-5%2012-12zm192%200v-40c0-7-5-12-12-12h-40c-7%200-12%205-12%2012v40c0%207%205%2012%2012%2012h40c7%200%2012-5%2012-12zm96-260v352c0%2027-21%2048-48%2048H48c-26%200-48-21-48-48V112c0-26%2022-48%2048-48h48V12c0-7%205-12%2012-12h40c7%200%2012%205%2012%2012v52h128V12c0-7%205-12%2012-12h40c7%200%2012%205%2012%2012v52h48c27%200%2048%2022%2048%2048zm-48%20346V160H48v298c0%203%203%206%206%206h340c3%200%206-3%206-6z%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M228%20292h220v220H228z%22%2F%3E%3Cpath%20d%3D%22M338%20302a100%20100%200%201%200%200%20200%20100%20100%200%200%200%200-200zm0%20181a81%2081%200%201%201%200-162%2081%2081%200%200%201%200%20162zm25-42l-34-25c-2-1-2-3-2-4v-66c0-3%202-5%205-5h12c3%200%205%202%205%205v57l27%2019c2%202%203%205%201%207l-7%2011c-2%202-5%202-7%201z%22%2F%3E%3C%2Fsvg%3E');
    width: 80px;
    height: 80px;
    display: inline-block;
    background-color: transparent;
    fill: currentColor;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;i class="icon"&gt;&lt;/i&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><b>So my question is:</b> How to fill SVG path in CSS, while SVG is putted inline in CSS?</p>