Change icon when click button ionic 2

Question

i'm trying to change the icon when click the button its show hidden content i need to change up and down arrow icon

<button clear text-center (click)="toggle()">
 <ion-icon name="arrow-dropdown-circle"></ion-icon>
 </button>

<ion-col [hidden]="!visible" class="accountBalance animated slideInUp">
       <ion-list>
          <ion-item>
            <h3>limit</h3>
                <ion-note item-right>
                    <h2>&#x20B9; 55000.00</h2>
                </ion-note>
          </ion-item>
<ion-list></ion-col>

file.ts

visible = false;
  toggle() {
   this.visible = !this.visible;
  }

Answer 1

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>