How to update icon on tabs with custom image from a variable?

Ionic Framework ionic-v3
7

You just need to bind a variable to the [tabIcon] property and then update the value of that variable:

In your template:

<ion-tabs [selectedIndex]="tabIndex" name="event">
  <ion-tab [root]="tab1Root" tabTitle="Discover" [tabIcon]="discover.icon"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="Search" [tabIcon]="search.icon"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Me" [tabIcon]="me.icon"></ion-tab>
  <ion-tab [root]="tab4Root" tabTitle="My Events" [tabIcon]="myEvents.icon"></ion-tab>
</ion-tabs>

In your component:

this.discover.icon = 'beer';

See: Change icon type after clicking