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

Question

我有一些使用Angular Material的选项卡。我试图在标题前插入图片/图标，但是似乎看不到该怎么做？我正在使用Angular 7版本。到目前为止，我的代码是：

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

您需要做的就是按照此示例使用选项卡中的图标。这是代码中的堆栈闪电，在选项卡中显示图标。 将模板更改为：

    

                    {{link.icon}}           {{link.label}}                

    

在您的组件中添加一个icon属性（请参见此处的图标列表）： navLinks = [     {path：“ details”，标签：“ V Details”，图标：“ star”}，     {路径：“选择”，标签：“产品”，图标：“ star_border”}，     {path：“ clselect”，标签：“ Client Details”，图标：“ star_half”}，   ]; 也许添加一些CSS将图标与标签标签分开： .example-tab-icon {   右边距：8px; }