How to add a clear icon on dropdown Angular Material?

I’m trying to add a clear icon on the right side of a dropdown (select component) in Angular material only if the user selects an option. If the user clicks on the "clear" icon I want to delete the value and reset the field. So far I have the dropdown and struggling on displaying the icon properly. Can anyone point me in the right direction? thanks in advance.

Here’s my code:

<mat-form-field appearance="fill">
  <mat-label>Select a food</mat-label>
  <mat-select>
    <mat-option *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
    <mat-select-trigger>
        <button>
           <mat-icon>clear</mat-icon>
       </button>
    </mat-select-trigger>
  </mat-select>
</mat-form-field>

Here’s LIVE DEMO

135 thoughts on “How to add a clear icon on dropdown Angular Material?”

  1. Pingback: priligy drug
  2. Pingback: stromectol use
  3. Pingback: stromectol generic
  4. Pingback: brand viagra 50 mg

Leave a Comment