CODEWITHSUNDEEP
angularangular-materialangular-material2
john.acb
john.acb

Reputation: 213

Angular Material - mat-optgroup with image

Trying to figure out if the following is possible:

https://material.angular.io/components/select/examples (See "Select with option groups")

Using Angular Material groups in a select component, is it possible to add an image before each group label? In this case, I'd want an image before the group names: Grass, Water, Fire and Psychic. Doesn't seem like the mat-optgroup component has that option.

Image before group name

Upvotes: 3

Views: 718

Answers (1)

Rhett Harrison
Rhett Harrison

Reputation: 432

Yes, you can do this. Wrap the <mat-optgroup> tag in a flex element with a flex direction of row. Add the <mat-icon> you want before the group.

<div style="display: flex">
  <mat-icon matPrefix>grass</mat-icon>
  <mat-optgroup label="grass">
    <mat-option>Squirtle</mat-option>
    <mat-option>Psyduck</mat-option>
    <mat-option>Horsea</mat-option>
  </mat-optgroup>
</div>

Upvotes: 0

Related Questions