mat-icon с mat-select внутри вкладки mat

Question

У меня есть вкладка с выпадающим меню на ярлыке вкладки со значком.

<mat-tab-group [selectedIndex]="0" animationDuration="2ms">
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon>{{selectedOption}}</mat-icon>
                <mat-form-field>

                    <mat-select [(ngModel)]="selectedOption">
                        <mat-option value="dashboard" selected><mat-icon>dashboard</mat-icon>Dashboard</mat-option>
                        <mat-option value="people"><mat-icon>people</mat-icon>People</mat-option>
                    </mat-select>
                </mat-form-field>
            </ng-template>
            <ng-template matTabContent>
                {{selectedOption}}
            </ng-template>
        </mat-tab>
    </mat-tab-group>

Когда я выбираю опцию из выпадающего меню, например this (Например, выберите Dashboard)

Я хочу отобразить заголовок со значком на вкладке, например

Но на ярлыке вкладки отображается значок, имя и заголовок значка, например

Это потому, что я добавил mat-icon внутри mat-option, так как я хочу отобразить значок в выпадающем меню.Как я могу отображать только значок и заголовок на ярлыке вкладки?Вот stackblitz https://stackblitz.com/edit/angular-ht6mdk?file=src%2Findex.html Заранее спасибо

Answer 1

Таким образом, вы можете добавить значок, используя директиву svgIcons с mat-icon.Это будет работать.

<mat-select [(ngModel)]="selectedOption">
     <mat-option value="dashboard" selected>    
           <mat-icon svgIcons="dashboard"></mat-icon>Dashboard
     </mat-option>
     <mat-option value="people">
           <mat-icon svgIcons="people"></mat-icon>People
     </mat-option>
</mat-select>

Working_StackBlitz