Change icon when click button ionic 2
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>