SVG Sprite with <use> xlink in CSS ::after - css

Question

I’m using a SVG sprite like this in the body:
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="bars" width="1792" height="1792" viewBox="0 0 1792 1792">
<path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z"/>
</symbol>
</svg>
If I need the symbol, I call it like this:
<svg class="icon left bars" style="fill: #000;">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bars"></use>
</svg>
Now I need this SVG in a CSS ::after. I know that you can use a SVG as background image in the ::after but it won’t work with use:
.element::after {
background: url('data:image/svg+xml;utf8,<svg class="icon left bars" style="fill: #000;"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#bars"></use></svg>') no-repeat;
//background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='61' height='41' fill='#000' stroke='none'><path d='M0,0 6,10 L12,0 L0,0 Z'></path></svg>") no-repeat;
content: "";
display: block;
height: 16px;
width: 16px;
}
Demo: JSFiddle
Is there anyone who got this working?

Answer 1

.element::before {background-image:url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 75.33 68.119'>\ <polygon fill-rule='evenodd' clip-rule='evenodd' fill='red' points='8.125,11.865 75.33,0 73.794,37.574 70.938,68.119 0,64.603 '/>\ </svg>"); content:""; display:inline-block; width:75.33px; height:68.119px;}
<div class="element"></div>
However it only works on non-IE browsers, a shame as you could turn it into a mixin in less/sass so you dont bloat your working css.
I got it from
https://codepen.io/AmeliaBR/details/xijuv
And also worth a read https://manu.ninja/inline-svg-how-i-learned-to-stop-worrying-and-love-gzip/
EDIT working in IE 11
See this answer CSS: Using raw svg in the URL parameter of a background-image in IE