将 mat-icons 放在 Angular 6 中的选择内

Question

我想将 mat-icons 放在一个选择中。这个想法是在选择中包含所有可用的水果状态，而不是显示它们的名称（或 ID），显示它们的 mat-icon 表示。选择按预期工作，但我似乎无法用图标替换文本。

我尝试过的：

-> 将 mat-icon 替换为带有 font awesome 类的简单 span，如下所示：

Material select with material-icons issue

-> 玩弄this 答案，但使用 mat-select 而不是 select 会破坏整个 div（它没有按预期工作，无法选择任何东西，没有选项，甚至选择触发器）。

我的代码（一个版本）：

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

另一个版本：

    <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-icons 时，“图标”部分会被完全忽略，选择选项会显示图标的文本（名称）。

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

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

Answer 1

它已经通过使用所有“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>