How to make a dynamic icon in navbar?

I have this heart icon in the nav bar, I want to make it inactive by default and when clicked call some function foo which makes it active. What are some good approaches to achieve this?

Please help, thanks.

Just use *ngIf directive. Declare a global variable and use true false state.

  selector: 'page-home',
  template: '<ion-icon name="heart" *ngIf="heartIconShow"></ion-icon>'
export class HomeComponent {
   heartIconShow: boolean = false;
       this.heartIconShow = true;

These two things are contradictory. If it’s inactive, clicking it does nothing by definition. I’m going to pretend you want to make it look inactive, in which case I would do this:

unhearted = true;
hearten(): void { this.unhearted = false; }

<button ion-button [class.faded]="unhearted" (click)="hearten()">
  <ion-icon name="heart"></ion-icon>

.faded {
  opacity: 0.4;

That opacity level is what the standard Ionic CSS uses for disabled buttons.