title: @nebular customise menu (NbMenuComponent) html not working
body: <p>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. </p>
  
  <p>tried to change "/node_modules/@nebular/theme/components/menu/menu-item.component.html"
  but html changes not reflecting </p>
  
  <pre><code>&lt;span *ngIf="menuItem.group"&gt;
    &lt;!-- &lt;nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"&gt;&lt;/nb-icon&gt; --&gt;
    &lt;i class="{{menuItem.icon}}"&gt;&lt;/i&gt;
    {{ menuItem.title }}
  &lt;/span&gt;
  &lt;a *ngIf="menuItem.link &amp;&amp; !menuItem.url &amp;&amp; !menuItem.children &amp;&amp; !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);"&gt;
    &lt;!-- &lt;nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"&gt;&lt;/nb-icon&gt; --&gt;
    &lt;i class="{{menuItem.icon}}"&gt;&lt;/i&gt;
    &lt;span class="menu-title"&gt;{{ menuItem.title }}&lt;/span&gt;
  &lt;/a&gt;
  &lt;a *ngIf="menuItem.url &amp;&amp; !menuItem.children &amp;&amp; !menuItem.link &amp;&amp; !menuItem.group"
     [attr.href]="menuItem.url"
     [attr.target]="menuItem.target"
     [attr.title]="menuItem.title"
     [class.active]="menuItem.selected"
     (mouseenter)="onHoverItem(menuItem)"
     (click)="onSelectItem(menuItem)"&gt;
    &lt;!-- &lt;nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"&gt;&lt;/nb-icon&gt; --&gt;
    &lt;i class="{{menuItem.icon}}"&gt;&lt;/i&gt;
    &lt;span class="menu-title"&gt;{{ menuItem.title }}&lt;/span&gt;
  &lt;/a&gt;
  &lt;a *ngIf="!menuItem.children &amp;&amp; !menuItem.link &amp;&amp; !menuItem.url &amp;&amp; !menuItem.group"
     [attr.target]="menuItem.target"
     [attr.title]="menuItem.title"
     [class.active]="menuItem.selected"
     (mouseenter)="onHoverItem(menuItem)"
     (click)="$event.preventDefault(); onItemClick(menuItem);"&gt;
    &lt;!-- &lt;nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"&gt;&lt;/nb-icon&gt; --&gt;
    &lt;i class="{{menuItem.icon}}"&gt;&lt;/i&gt;
    &lt;span class="menu-title"&gt;{{ menuItem.title }}&lt;/span&gt;
  &lt;/a&gt;
  &lt;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="#"&gt;
    &lt;!-- &lt;nb-icon class="menu-icon" [icon]="menuItem.icon" *ngIf="menuItem.icon"&gt;&lt;/nb-icon&gt; --&gt;
    &lt;i class="{{menuItem.icon}}"&gt;&lt;/i&gt;
    &lt;span class="menu-title"&gt;{{ menuItem.title }}&lt;/span&gt;
    &lt;nb-icon class="expand-state" [icon]="getExpandStateIcon()" pack="nebular-essentials"&gt;&lt;/nb-icon&gt;
  &lt;/a&gt;
  &lt;ul *ngIf="menuItem.children"
      [class.collapsed]="!(menuItem.children &amp;&amp; menuItem.expanded)"
      [class.expanded]="menuItem.expanded"
      [@toggle]="toggleState"
      class="menu-items"&gt;
    &lt;ng-container *ngFor="let item of menuItem.children"&gt;
      &lt;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"&gt;
      &lt;/li&gt;
    &lt;/ng-container&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>i have commented "nb-icon" and changed it with "i" tag to render fontawesome icon.</p>
  
  <p><a href="https://i.stack.imgur.com/3nPVc.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3nPVc.jpg" alt="error after changing menu icon to fontawesome"></a></p>
  
  <p><a href="https://i.stack.imgur.com/OPjWW.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OPjWW.jpg" alt="menu-item.component.html after changes (not reflecting)"></a></p>
  
  <p><a href="https://i.stack.imgur.com/YVGh5.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YVGh5.jpg" alt="pages-menu.ts (icon changes from eva to fontawesome)"></a></p>
  
  <p>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.</p>