Styling inline SVG in CSS (eg fill prop)

Question

I'm trying to style SVG image putted inline in CSS. I will use examples for better understanding the topic.

Example 1. Inline SVG in HTML - setting color of path via CSS

In this example SVG takes color of path from CSS fill: currentColor; property (with means #67809F from body delaration)

body {
  color: #67809F;
}
svg {
  background-color: transparent;
  fill: currentColor;
  width: 80px;
  height: 80px
}

<svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 448 512"><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"/><path fill="#fff" d="M228 292h220v220H228z"/><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"/></svg>

Example 2. Inline SVG in CSS - setting color of path via CSS don't work

In this example SVG icon is paste to CSS inline, and setting of color path doesn't work.

.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;
}

<i class="icon"></i>

So my question is: How to fill SVG path in CSS, while SVG is putted inline in CSS?