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

问题

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>

回答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;
}

回答2:

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>

来源：https://stackoverflow.com/questions/58489636/how-to-change-the-color-of-custom-svg-icon-in-ionic-4