Как установить цвет заливки фона/встроенного SVG?

Question

.icon { 
 
    width: 20px; height: 20px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>'); 
 
}

<div class='icon'></div>

Как установить цвет заливки (с использованием CSS) инлайн/фона SVG?

Answer 1

.icon { 
    width: 20px; height: 20px; 
    background-color: red; 
-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>'); 
    mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"><circle cx="10" cy="10" r="10" /></svg>'); 
}