Размещение матовых значков внутри выбора в Angular 6

Question

Я хотел бы разместить мат-иконки внутри выбора.Идея состоит в том, чтобы иметь все доступные статусы фруктов в списке выбора и вместо этого показывать их имена (или идентификаторы), показывать их представление в виде значков матов.Выделение работает, как и ожидалось, хотя я не могу заменить текст значками.

То, что я пробовал:

-> заменить значок мата простым промежутком скласс шрифта, представленный здесь:

Выбор материала с выпуском материалов-значков

-> игра с этим ответом, но с использованием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>

Поскольку ни один из них не работает, я был бы признателен за любую помощь в этом вопросе.Спасибо!

Дополнительная информация

При использовании с потрясающим шрифтом, я получаю пустые опции выбора, без ошибок, но также без значков.

Когдаиспользуя mat-icons, часть «icon» полностью игнорируется, а в параметрах выбора отображается текст (имена) значков.

И в случае, если это может быть вопрос, мне нужно использовать что-то вроде select, потому что в будущем может быть больше статусов

Edit: Я использую оба типа значков (мат и 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>