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>
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>
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;
}
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.
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>
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
<ion-icon class="something".....
then in css.something { fill: red }
css class
on click event in whichcolor:something;
is defined!