Angular 8 Can't change fill color of inline SVG

Question

I'm having some problems filling an InlineSVG. I have a div with the svg:

<div class="svg-div" [inlineSVG]="'../../../assets/images/add.svg'"></div>

Then in CSS:

.svg-div {
    fill: blue;
}

but the icon remains grey.

I've also tried:

.svg-div ::ng-deep svg{
    fill: blue;
}

in different combinations, but nothing worked.
Here is the link to my stackblitz . What's wrong?

Answer 1

It is not working because fill attribute is hardcoded in your svg file. Remove fill="#7A7A7A" from your svg file then you will be able to change color through css.

Answer 2

you need to add path to css

::ng-deep svg path {
  fill: blue;
}