如何使用角度2/4材质更改单击事件上的material-icon？

<mat-icon (click)="changeMaterialIcon()">favorite</mat-icon>

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  materialIcon: string = 'favorite';

  changeMaterialIcon() {
    if (this.materialIcon === 'favorite') {
      this.materialIcon = 'star';
    } else {
      this.materialIcon = 'favorite';
    }
  }
}

<mat-icon (click)="changeMaterialIcon()">{{ materialIcon }}</mat-icon>