How to change the color of custom svg icon in ionic 4?

Question

I want to change the color of a custom svg icon on clicking a button

<ion-item>
    <ion-icon src="../../assets/img/icon-qr.svg"></ion-icon>
    <ion-label>Qr Scan</ion-label>
</ion-item>

Answer 1

I was unable to override an svg stroke or fill if it was specified in the svg.

Example: bad svg

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16">
  <g fill="#88AACC" fill-rule="evenodd" stroke-linecap="round" stroke="#555555" stroke-linejoin="round" stroke-width="2">
     ...
  </g>
</svg>

Removing fill="#88AACC" & stroke="#555555" from within the SVG itself then allowed it to be controlled from CSS as you'd expect.

.some-class {
  fill: red;
  stroke: blue;
}

Answer 2

If you remove the entire style attribute inside the path of your custom icon, Ionic adds its default style instead.

<path
 style="APPLIED STYLE"
 d="DRAWN PATH"
/>

After removing the style attribute, the custom icon can be used like e.g. ionicons.

<IonIcon icon={CUSTOM_ICON} color="primary" />

Ionic sets the fill property of the svg when the color attribute is used. Stroke color e.g. if used for outline icons is not set.

Answer 3

its working fine see below

page.html

<ion-item>
    <ion-icon src="/assets/images/box.svg" color="primary" style="fill: brown;"></ion-icon>
    <ion-label>Qr Scan</ion-label>
</ion-item>

<ion-item>
  <ion-icon src="/assets/images/boxing.svg" style="fill: brown;"></ion-icon>
  <ion-label>Qr Scan</ion-label>
</ion-item>

Answer 4

for me only i had to remove fill property fill="#000000" from the svg file

``<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" 

xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 60 60" style="enable-background:new 0 0 496 496;" xml:space="preserve"> <g xmlns="http://www.w3.org/2000/svg">

<path ...... fill="#000000" />

<path ...... fill="#000000" />

<path ...... fill="#000000" />

and then on my Ion-icon i did like so

<ion-icon style="fill: white;" ></ion-icon>

that solved the issue