Angular Material tabs adding custom icon/image before tab title

Question

I have some tabs using Angular Material. I am trying to put in an image/icon before the title, But can't seem to see how to do it? I am using version 7 for Angular. My code so far is:

html.file

<div class="tabs">
    <nav mat-tab-nav-bar mat-align-tabs="left">
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
          {{link.label}}
        </a>
      </nav>
    </div>

ts.file

export class ContentAreaComponent implements OnInit {

  navLinks = [
    {path: 'details', label: 'V Details'},
    {path: 'select', label: 'Product'},
    {path: 'clselect', label: 'Client Details'},
  ];
}

Answer 1

All you need to do is follow this example with the icons in the tabs. Here is a stackblitz from your code that shows icons in the tabs.

Change your template to:

<div class="tabs">
    <nav mat-tab-nav-bar mat-align-tabs="left">
        <a mat-tab-link
           *ngFor="let link of navLinks"
           [routerLink]="link.path"
           routerLinkActive #rla="routerLinkActive"
           [active]="rla.isActive">
          <mat-icon class="example-tab-icon">{{link.icon}}</mat-icon>
          {{link.label}}
        </a>
      </nav>
    </div>

In your component add an icon property (see list of icons here ):

navLinks = [
    {path: 'details', label: 'V Details', icon: 'star'},
    {path: 'select', label: 'Product', icon: 'star_border'},
    {path: 'clselect', label: 'Client Details', icon: 'star_half'},
  ];

And maybe add some CSS to separate the icon from the tab label:

.example-tab-icon {
  margin-right: 8px;
}