使 mat-icon 默认使用 svg

Question

当使用 <mat-icon>info</mat-icon> 时，它默认为基于字体的图标（我还没有加载）。是否可以让它表现得像我写 <mat-icon svgIcon="info"></mat-icon>?

Answer 1

我认为没有为此提供任何类型的 material 定制。您可以轻松地在您的应用程序中创建一个组件：从'@angular/core';

导入{ChangeDetectionStrategy, Component, Input}

@Component({
  selector: 'app-custom-icon',
  templateUrl: './custom-icon.component.html',
  styleUrls: ['./custom-icon.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CustomIconComponent {
  @Input()
  iconName!: string;
}

和模板：

<mat-icon [svgIcon]="iconName"></mat-icon>

然后您可以在您的应用中使用它，例如：

<app-custom-icon [iconName]="help"></app-custom-icon>

使 mat-icon 默认使用 svg

Make mat-icon use svg by default

angular

angular-material