CODEWITHSUNDEEP
angularselectmaterial-designangular-materialangular5
MaSza
MaSza

Reputation: 465

Angular Material button in select

I try to display button in angular material select and I use this code:

<mat-select #placeNameControl="ngModel" placeholder="Place name">
  <mat-option >
    Add new place name
  </mat-option>
  <mat-option *ngFor="let addedPlaceName of addedPlaceNames" [value]="addedPlaceName">
    {{addedPlaceName}}
    <button type="buttton" mat-icon-button>
       <mat-icon>remove</mat-icon>
    </button>
  </mat-option>
</mat-select>

And this works, but when I select one of the options, this display selected element and name of the icon like this: enter image description here

This is probably bug in Angular Material but maybe someone know some workaround? I know I can fix this issue with typescript, but this is not the most elegant and clean way.

Upvotes: 1

Views: 5110

Answers (1)

k.vincent
k.vincent

Reputation: 4133

Use the mat-icon as SVG and give it a try as SVG icon... it might not display the SVG markup as a text.

Upvotes: 2

Related Questions