带有mat-select的mat-icon，位于mat-tab内部

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（例如，选择仪表板）

我想在标签上显示带有图标的标题，如

但是标签标签显示图标和图标名称以及标题，例如

这是因为我想在下拉菜单中显示图标，所以在mat-option内添加了mat-icon。如何在标签标签上仅显示图标和标题？ 这是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