CODEWITHSUNDEEP
angularangular-material
sally
sally

Reputation: 429

mat-icon with mat-select inside mat-tab

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

Upvotes: 2

Views: 3811

Answers (1)

Techie_T
Techie_T

Reputation: 435

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

Upvotes: 4

Related Questions