How do you prevent material icon text from showing up in material selection

4
votes

How do you prevent material icon text from showing up when a mat-option is selected?

Component.html

<form [formGroup]="autoPopulatePOCForm">
   <mat-form-field class="savedPocWrapper">
      <mat-select class="form-control" formControlName="poc" id="poc" ngDefaultControl disableRipple disableOptionCentering>
        <mat-select-trigger>
          {{poc.lastName}}, {{poc.firstName}} ({{poc.email}})
       </mat-select-trigger>
        <mat-option class="poc-mat-option" value="">Choose</mat-option>
        <mat-option class="poc-mat-option" *ngFor="let poc of savedPOCs" [value]="poc">
          <button class="poc-mat-button" type="button" (click)="deletePOC(poc.email)" mat-icon-button>
             <mat-icon class="poc-mat-icon">
                <i class="material-icons">delete</i>
              </mat-icon>
          </button>
          {{poc.lastName}}, {{poc.firstName}} ({{poc.email}})
        </mat-option>
      </mat-select>
    </mat-form-field>
</form>

Component.ts

this.autoPopulatePOCForm = this.formBuilder.group({
  poc: new FormControl()
});

enter image description here enter image description here

Update

Setting the mat-select-trigger is what I want to do but I cannot get the data binding to work in a FormGroup.

2
angularangular-materialangular-material2angular4-forms

2 Answers

0
votes

try this 

<mat-icon class="poc-mat-icon">
     <i class="material-icons">delete</i>
</mat-icon>
0
votes

There is a component called mat-select-trigger

<mat-form-field class="savedPocWrapper">
  <mat-select class="form-control" formControlName="poc" id="poc" ngDefaultControl disableRipple disableOptionCentering="false">
     <mat-select-trigger>
        <button>
           <mat-icon>delete</mat-icon>
        </button>
       {{selectionText}}
     </mat-select-trigger>
   <mat-option class="poc-mat-option" value="">Choose</mat-option>
   <mat-option class="poc-mat-option" *ngFor="let poc of savedPOCs" [value]="poc">
     <button class="poc-mat-button" type="button" (click)="deletePOC(poc.email)" isIconButton mat-icon-button>
      <mat-icon class="poc-mat-icon" aria-hidden="true">delete</mat-icon>
     </button>
          {{poc.lastName}}, {{poc.firstName}} ({{poc.email}})
   </mat-option>
 </mat-select>
</mat-form-field>