带有 material-icon 的星云不显示图标答案

【问题标题】：nebular with material-icon are not shown icons带有 material-icon 的星云不显示图标
【发布时间】：2022-06-25 00:58:04
【问题描述】：

我按照文档配置连字字体包documentation icon

  constructor(
  private _iconLibraries: NbIconLibraries
 ) {
  this._iconLibraries.registerFontPack('material-icons', {
   ligature: true,
  });

在我的 app.module.ts 我有这样的导入

 imports: [
  NbEvaIconsModule,
  NbIconModule,
  MatIconModule,
  ...
 ]

我的组件中有这个：

 <nb-icon icon="star"></nb-icon>
 <nb-icon icon="group" pack="material-icons"></nb-icon>
 <nb-icon icon="star"></nb-icon>
 <mat-icon>group</mat-icon>
 <nb-icon icon="star"></nb-icon>

“星”图标显示没有问题，mat-icon中的“group”也显示了，但是nb-icon里面的“group”显示为“group”文本，没有图标。

在 package.json 我有这个：

"@angular/material": "~13.1.0",
"@nebular/eva-icons": "9.0.0",
"@nebular/theme": "^9.0.0",
"eva-icons": "^1.1.2",
"material-design-icons": "^3.0.1",
"nebular-icons": "^1.1.0",

我做错了吗？

【问题讨论】：

标签： angular nebular material-icons

【解决方案1】：

在您的 index.html 导入中

<link
  href="https://fonts.googleapis.com/css?family=Material+Icons"
  rel="stylesheet"
/>

【讨论】：

感谢您的回答，但也没有用。

【解决方案2】：

https://github.com/akveo/nebular/issues/2554

似乎 Nebular 文档没有很好地记录；并且也被修复了。只要您在 v9 Nebular Theme 上运行，只需按照其示例而不使用 CustomNbIconLibraries。

export class AppModule {
  constructor(private iconLibraries: NbIconLibraries) {
    this.registerMaterialIcons();
  }

  private registerMaterialIcons() {
    this.iconLibraries.registerFontPack("material-icons", {
      packClass: "material-icons",
      ligature: true
    });
    this.iconLibraries.setDefaultPack("material-icons");
  }
}

【讨论】：