Modify SVG fill color when being served as Background-Image

Question

Placing the SVG output directly inline with the page code I am able to simply modify fill colors with CSS like so:

po         


        

Answer 1

You can use CSS masks, With the 'mask' property, you create a mask that is applied to an element.

.icon {
    background-color: red;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);
}

For more see this great article: https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images