mat-icon with mat-select inside mat-tab

Question

I have tab with dropdown menu on tab label with icon.

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

When I select an option from dropdown like this (For example, select Dashboard)

I want to display the title with the icon on the tab like

this

But the tab label shows icon and icon name and title like

this

It is because I added mat-icon inside mat-option as I want to display an icon in the dropdown menu. How can I display only icon and title on the tab label? Here is stackblitz https://stackblitz.com/edit/angular-ht6mdk?file=src%2Findex.html Thanks in advance

not sure about your requirements but showing a select in tab label is not a great idea as it conflicts with material design concepts. You may consider using other layout components like list within a tab to make it more usable — umutesen
I agree with @UmutEsen. Go through material.io. you can check was is user friendly and what isn't. — Josef Katič

Techie_T Techie_T · Accepted Answer · 2019-03-12T09:40:43

You can add an icon in this way using svgIcons directive with mat-icon. It will work.

<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

mat-icon with mat-select inside mat-tab

1 Answers