Angular Material选项卡在选项卡标题之前添加自定义图标/图像

Question

我有一些使用Angular Material的标签。我试图在标题之前放入一个图像/图标，但似乎无法看到如何做到这一点？我正在使用版本7 for Angular。到目前为止我的代码是：

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

您需要做的就是按照标签中的图标跟随this示例。 Here是代码中的stackblitz，它在选项卡中显示图标。

将模板更改为：

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

在您的组件中添加一个图标属性（请参阅图标列表here）：

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

并且可能添加一些CSS以将图标与选项卡标签分开：

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