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

Answer 1

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

Answer 2

try adding font awesome to libraries using NbIconLibraries service like

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