@nebular customise menu (NbMenuComponent) html not working

Question

I am using akveo/ngx-admin theme for my project. And i need to customise sidebar menu icons. nebular came with eva icons but i need fontawesome icons.

tried to change "/node_modules/@nebular/theme/components/menu/menu-item.component.html" but html changes not reflecting

<span *ngIf="menuItem.group">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  {{ menuItem.title }}
</span>
<a *ngIf="menuItem.link && !menuItem.url && !menuItem.children && !menuItem.group"
   [routerLink]="menuItem.link"
   [queryParams]="menuItem.queryParams"
   [fragment]="menuItem.fragment"
   [skipLocationChange]="menuItem.skipLocationChange"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   (click)="onItemClick(menuItem);">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="menuItem.url && !menuItem.children && !menuItem.link && !menuItem.group"
   [attr.href]="menuItem.url"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   (click)="onSelectItem(menuItem)">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="!menuItem.children && !menuItem.link && !menuItem.url && !menuItem.group"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   (click)="$event.preventDefault(); onItemClick(menuItem);">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
</a>
<a *ngIf="menuItem.children"
   (click)="$event.preventDefault(); onToggleSubMenu(menuItem);"
   [attr.target]="menuItem.target"
   [attr.title]="menuItem.title"
   [class.active]="menuItem.selected"
   (mouseenter)="onHoverItem(menuItem)"
   href="#">
  <!-- <nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"></nb-icon> -->
  <i class="{{menuItem.icon}}"></i>
  <span class="menu-title">{{ menuItem.title }}</span>
  <nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"></nb-icon>
</a>
<ul *ngIf="menuItem.children"
    [class.collapsed]="!(menuItem.children && menuItem.expanded)"
    [class.expanded]="menuItem.expanded"
    [@toggle]="toggleState"
    class="menu-items">
  <ng-container *ngFor="let item of menuItem.children">
    <li nbMenuItem *ngIf="!item.hidden"
        [menuItem]="item"
        [class.menu-group]="item.group"
        (hoverItem)="onHoverItem($event)"
        (toggleSubMenu)="onToggleSubMenu($event)"
        (selectItem)="onSelectItem($event)"
        (itemClick)="onItemClick($event)"
        class="menu-item">
    </li>
  </ng-container>
</ul>

i have commented "nb-icon" and changed it with "i" tag to render fontawesome icon.

fontawesome free css is imported into angular.json and fontawesome icons are working properly in project. not sure what to do. anything would be helpful, thank you.

hi, anyone know about this ? – Mohit Patil Aug 08 '19 at 02:52 — Mohit Patil, Aug 08 '19 at 02:52

score 1 · Answer 1 · answered Dec 12 '19 at 15:15

1

try adding font awesome to libraries using NbIconLibraries service like

constructor {
 ...
 private icons: NbIconLibraries,
 ...
} {
 this.icons.registerFontPack(...)
 // or
 this.icons.registerSvgPack(...)
}

answered Dec 12 '19 at 15:15

rfprod

231
2
8

score 1 · Answer 2 · answered May 17 '20 at 14:09

you can install awesome fonts in your project and add the below code to your parent module which is PagesModule in below example

export class PagesModule {
  constructor(iconsLibrary: NbIconLibraries){
    iconsLibrary.registerFontPack('fa', { packClass: 'fa', iconClassPrefix: 'fa' 
    });
  }
}

@nebular customise menu (NbMenuComponent) html not working

2 Answers2