Is there a way to swap out the checkbox for an image? I want this image to change dynamically based on whether the checkbox is checked or not. Unfortunately, adding a class doesn't seem to do the trick as it modifies all icons in the same column. The checkbox I am using is ion-checkbox. Even trying ion-checkbox:checked in CSS isn't yielding the desired result.
Upon examining the images below: my goal is to substitute the pin icon with the checkbox. When the checkbox is ticked, only one of the icons should change color to red, not all of them.
HTML
<tr *ngFor="let object of array">
<td>
<fa name="map-marker" [ngClass]="pinIcon ? 'unclick-pin' : 'click-pin'"></fa>
<ion-checkbox (ionChange)="selectTwo(object, $event.checked)"></ion-checkbox>
</td>
</tr>
TS
selectTwo(object, isChecked: boolean){
this.pinIcon = !this.pinIcon;
}
https://i.sstatic.net/FRky3.png . https://i.sstatic.net/dfRwi.png