Angular - Switch Icons

Question

<div fxLayout='row' fxLayoutGap='10px' >
    <button mat-raised-button class="mapButton" [disabled]="!isMapLoaded" (click)="optionsView=true">
      <mat-icon svgIcon="measureOption"></mat-icon>
    </button>
    <div fxLayout='row'  fxLayoutGap='10px' [ngClass]="optionsView? 'optionList1':'optionList'"
      (mouseleave)="optionsView=false">
      <div>
        <mat-button-toggle #toolMeasureLine value="measure_line" matTooltip="Strecke messen" [disabled]="!isMapLoaded" (change)="onMeasureValChange($event.value)" aria-label="Distanz messen" class="toggleButton">
          <mat-icon class="measureButtonLine" >lm</mat-icon>
        </mat-button-toggle>
      </div>
      <div >
        <mat-button-toggle #toolMeasureArea value="measure_area" matTooltip="Fläche messen" [disabled]="!isMapLoaded" (change)="onMeasureValChange($event.value)" aria-label="Fläche messen" class="toggleButton">
          <mat-icon class="measureButtonPolygon">am</mat-icon>
        </mat-button-toggle>
      </div>
    </div>
  </div>

how can i get if i click the mat-button-toggle and the icon in mat-icon at top change? and after i click the mat-icon again become normal again.

any ideas?