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

You can use .filter of css to change appearances of svg. You can not directly change svgs.

.icon{
  filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(86deg) brightness(118%) contrast(119%);
}