To enable or disable the select component on button click in angular material

I am using select component 2 times for selecting the timings and i also added icon as a suffix to make action as add and cancel.As shown in below image

when i click the cancel icon then it is changing to add icon as shown in below image.

Here is the code

HTML

 <mat-form-field class="no-line time">
                <mat-select  [(value)]="selectmonmor">
                  <mat-option *ngFor="let mondaymorning of mondaymornings"  [value]="mondaymorning.value">
                    {{mondaymorning.viewValue}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field  class="no-line time">
                  <mat-select [(value)]="selectmoneve">
                    <mat-option *ngFor="let mondayevening of mondayevenings" [value]="mondayevening.value">
                      {{mondayevening.viewValue}}
                    </mat-option>
                  </mat-select>

  </mat-form-field>
   <button  mat-button  matSuffix mat-icon-button >
          <mat-icon (click)="toggleIcon()">{{icon}}</mat-icon>
    </button>

TS

  public icon = 'highlight_off';

   public toggleIcon() {
   if (this.icon === 'highlight_off') {
     this.icon = 'add_circle_outline';
   } else {
     this.icon = 'highlight_off';
     }
   }

Here on clicking the icon i,e <mat-icon (click)="toggleIcon()">{{icon}}</mat-icon> the cancel icon(i,e highlight_off) it changing to add icon (i,e add_circle_outline) Now i need to disable the 2 dropdown(select components) on clicking the cancel icon then the icon will be changed to add, on clicking add select component as to be enabled.On surfing i got stackblitz link too

but here enable/disable actions are performing by 2 separate button using 2 click function, but i need it perform by only one icon.How can i do it?