Placing mat-icons inside a select in Angular 6

Question

I would like to place mat-icons inside a select. The idea is to have all available fruit statuses in the select and instead showing their names(or ids), show their mat-icon representation. The select is working as expected, although I can't seem to replace the text with icons.

What I've tried:

-> replacing the mat-icon with a simple span with font awesome class, presented here:

Material select with material-icons issue

-> playing around with this answer, but using mat-select instead of select breaks the whole div (it is not working as expected, not able to select anything, no options, or even select the trigger).

My code (one version):

    <select [(ngModel)]="fruits.status_id">
        <option *ngFor="let stat of statuses" [value]="stat.id">
            <div>
                <span class="fa fa-lock" *ngIf="stat.id === 1"></span>
                <span class="fa fa-lock-open" *ngIf="stat.id === 2"></span>
            </div>
        </option>
    </select>

Another version:

    <select [(ngModel)]="fruits.status_id">
        <option *ngFor="let stat of statuses" [value]="stat.id">
                <span *ngIf="stat.id === 1"><mat-icon>lock</mat-icon></span>
                <span *ngIf="stat.id === 2"><mat-icon>open_lock</mat-icon></span>
        </option>
    </select>

Being that none of them work, I'd appreciate any help on this matter. Thank you!

Additional info

When used with font awesome, I get empty select options, no errors, but also no icons.

When using mat-icons, the "icon" part get completely ignored, with the select options showing the text (names) of the icons.

And in case it could be a question, I need to use something like select because there might be more statuses in the future

Edit: I use both types of icons(mat and FA) in the same app in other places, and they are behaving as expected, so all the imports for them are correct.

malimilek malimilek · Accepted Answer · 2018-09-26T17:59:32

It has been solved by using everything "mat-".

Here's the code that works, for anyone that's having the same or a similar issue:

    <mat-select [(ngModel)]="fruits.status_id">
        <mat-option *ngFor="let stat of statuses" [value]="stat.id">
            <mat-icon *ngIf="stat.status_name === 'opened'">lock_open</mat-icon>
            <mat-icon *ngIf="stat.status_name === 'closed'">lock</mat-icon>
        </mat-option>
        <mat-select-trigger>
            <mat-icon *ngIf="getStatusName(fruits.status_id) === 'opened'">lock_open</mat-icon>
            <mat-icon *ngIf="getStatusName(fruits.status_id) === 'closed'">lock</mat-icon>
        </mat-select-trigger>
    </mat-select>

Placing mat-icons inside a select in Angular 6

1 Answers