How to change Ion-Icon with onclick?

Issue

My aim is to change a (+) Icon to a (-) Icon with a click of a button. I've read other posts but couldn't find an answer using JS. How would I be able to replace an icon with just a click of a button?

<ion-button onclick = "favourite()"><ion-icon name="add-outline"></ion-icon></ion-button>

My function has nothing inside it as I have no clue of how to do it.

Hope I was clear enough. Thanks, much appreciated.

Solution

Put the this reference in the function argument so your function will know which element was clicked.

<ion-button onclick = "favourite(this)"><ion-icon name="add-outline"></ion-icon></ion-button>

Then in your js file

function favourite(el) {
 el.querySelector('ion-icon').setAttribute('name', 'minus-outline');
}

This is saying "starting at the element that was clicked (el) find the first element with the tag name ion-icon and change it's attribute name to 'minus-outline'"

I don't have a way of testing this, so let me know if it works.

Answered By - Kinglish