Change color of svg ( icon) via css in angular 8

I work with svg icons and try to change the color of the icon and its not work.

But when I change the icon explicit in the file it work (fill: 'red).

This is my svg file inside assets folder:

<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
<path fill="#00A1DE" fill-rule="nonzero" stroke="#00A1DE" d="M21.708 10.77H12.23V1.293a.73.73 0 0 0-1.458 0v9.479H1.29a.73.73 0 0 0 0 1.458h9.48v9.48a.73.73 0 1 0 1.458 0v-9.48h9.48a.73.73 0 1 0 0-1.458z"/>
</svg>


icons.scss inside icons folder in style folder file:

.icon {
display: inline-block;
vertical-align: middle;
width: 30px;
height: 30px;
}

.plus {
content: url('/assets/images/icons/plus.svg');
}


I use the icon in component.html like this:

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


and I try to edit the color in component.css:

.icon {
position: relative;
bottom: 2px;
color: green
}


The position and bottom work but the color change only the box background I need to change the icon color not the background. Thanks

Continue reading...