title: How to toggle mat-icon in angular?
body: <p>i have multiple mat-icon (which comes dynamically) in mat-table. when i click on specific mat-icon for toggle mat-icon, it toggles all mat-icons but i want to toggle only clicked mat-icon. how to do this?</p>
  
  <p>follow.component.html</p>
  
  <pre><code>&lt;table mat-table [dataSource]="dataSource"&gt;
    &lt;ng-container matColumnDef="username"&gt;
      &lt;th mat-header-cell *matHeaderCellDef&gt; Full Name &lt;/th&gt;
      &lt;td mat-cell *matCellDef="let element"&gt; {{element.username}} &lt;/td&gt;
    &lt;/ng-container&gt;
  
   &lt;ng-container matColumnDef="action"&gt;
     &lt;th mat-header-cell *matHeaderCellDef&gt; Follow &lt;/th&gt;
       &lt;td mat-cell *matCellDef="let element"&gt;
         &lt;button mat-mini-fab color="primary" (click)="toggleIcon()"&gt;&lt;mat-icon&gt;{{icon}}&lt;/mat-icon&gt;&lt;/button&gt;
      &lt;/td&gt;
   &lt;/ng-container&gt;
  &lt;/mat-table&gt;
  </code></pre>
  
  <p>follow.component.ts</p>
  
  <pre><code>  dataSource : MatTableDataSource&lt;PeriodicElement&gt; ;
    displayedColumns: string[] = ['username','action'];  
  
  toggleIcon() {
    if (this.icon === 'person_add_disabled') {
      this.icon = 'person_add';
    } else {
      this.icon = 'person_add_disabled'
    }
  }
  
  this.supportService.getUsersListForFollowing({'userid':this.userid}).
    subscribe((data) =&gt; {
     if(data.status == 1){
       this.dataSource = new MatTableDataSource&lt;PeriodicElement&gt;(data.payload);
     }
    }
  );
  
  export interface PeriodicElement {
    username : string;
  }
  </code></pre>