CODEWITHSUNDEEP
csssvgangular8inline-svg
User978438
User978438

Reputation: 179

Angular 8 Can't change fill color of inline SVG

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?

Upvotes: 0

Views: 2421

Answers (2)

GreedyAi
GreedyAi

Reputation: 2839

you need to add path to css

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

enter image description here

Upvotes: 0

H S W
H S W

Reputation: 7119

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.

Upvotes: 0

Related Questions