angularnebularmaterial-icons

nebular with material-icon are not shown icons

I follow the documentation and configure the ligature font pack documentation icon

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

in my app.module.ts I have the imports like this

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

And i have this in my component:

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

The "star" icons are showed without problems, the "group" in the mat-icon is showed too, but the "group" inside nb-icon is shown as "group" text, no icon.

enter image description here

And in the package.json i have this:

"@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",

Am I doing something wrong?

Solution

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

    Seems the Nebular documentation didn't document well; and has been bugged fixed as well. Just follow its example without CustomNbIconLibraries as long you running on v9 Nebular Theme.

    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");
  }
}