Change Icon When Click Button Ionic 2

Answer :

You could use *ngIf directive here to show conditional icon.

<button clear text-center (click)="toggle()">    <ion-icon name="arrow-drop down-circle" *ngIf="!visible"></ion-icon>    <ion-icon name="arrow-drop up-circle" *ngIf="visible"></ion-icon> </button> 

You could use name property instead of creating two different ion-icon

<button clear text-center (click)="toggle()">    <ion-icon         [name]="visible ? 'arrow-drop up-circle' :'arrow-drop down-circle'">    </ion-icon> </button> 

You can create a conditional in the name= attribute

<ion-icon [name]="visible ? 'arrow-dropdown' : 'arrow-dropup'"></ion-icon> 

This took me forever to find since there are very few examples out there for toggling icons. However, I used the Ionic 2 Icons Doc and came up with this:

ts:

class ToggleIconsPage {     buttonIcon: string = "home";      toggleIcon(getIcon: string) {        if (this.buttonIcon === 'star') {         this.buttonIcon = "home";       }       else if (this.buttonIcon === 'home') {         this.buttonIcon = "star";       }    } } 

html:

<button #myButton ion-button icon-only (click)="toggleIcon()">     <ion-icon [name]="buttonIcon"></ion-icon> </button> 

See my CodePen as an example.

Hope this helps!