Angular 将垫子图标放置在角度6中的选择中

我想把垫子图标内选择。其想法是让所有可用的水果状态都显示在select中，而不是显示它们的名称（或ID），显示它们的mat图标表示。select按预期工作，尽管我似乎无法用图标替换文本

我所尝试的：

->将mat图标替换为一个简单的跨度和字体类，如下所示：

->玩answer游戏，但使用mat select而不是select会破坏整个div（它无法按预期工作，无法选择任何内容，没有选项，甚至无法选择触发器）

我的代码（一个版本）：

另一个版本：

    <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>

锁
开锁

由于它们都不起作用，我很感激在这件事上能得到任何帮助。谢谢大家!

附加信息

当与font awesome一起使用时，我会得到空的选择选项，没有错误，也没有图标

使用mat图标时，“图标”部分完全被忽略，选择选项显示图标的文本（名称）

如果这可能是一个问题，我需要使用类似select的东西，因为将来可能会有更多的状态

编辑：

---

我在其他地方的同一个应用程序中使用了两种类型的图标（mat和FA），它们的行为符合预期，因此它们的所有导入都是正确的。

使用所有“mat-”解决了这一问题

以下是适用于有相同或类似问题的任何人的代码：

    <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>

锁门
锁
锁门
锁

    <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>