I am looking to dynamically change the fill color of my SVG when a button is clicked. While I have been successful in changing it through external CSS using the npm package angular-svg-icon, I am unsure how to achieve this using TypeScript. I came across a similar query on StackOverflow but unfortunately, no solution was provided to the user: svg change rectangle Color on button ng-click
circle.svg:
<svg id="bars" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.15 224.35">
<circle class="cls-1" cx="50" cy="50" r="50" fill="#529fca" />
</svg>
tab1.page.html:
<ion-content>
<svg-icon [applyCss]="true" src="assets/images/circle.svg" [svgStyle]="{ 'height.px':200, 'width.px':200 }" />
<ion-button (click)="ChangeColor()">Click</ion-button>
</ion-content>
tab1.page.scss:
#bars{
position: absolute;
top: 80px;
right: 80px;
width: 200px;
height: 100px;
}
.cls-1 {
fill:blue;
}
Here is the function where I aim to modify the SVG color: ChangeColor(){ }