Angular4 - p-menu not able to see icons on menu bar

Question

Currently in my project, I am using Angular 4.1 with side menu feature. Right side I have hamburger menu icon. On click of it, I want to show labels with icons.

Below is my code

burger-menu.template.html

<div class="burger-menu-container">
  <p-menu [model]="items"></p-menu>
</div>

burger-menu.component.ts

import { MenuItem } from 'primeng/primeng';

Inside the class I have declared my variable like:

public items: MenuItem[];

In ngOnInit I called below method:

this.menuItem();

Function Implementation:

private menuItem(): void {
    this.items = [
      {
        label: this.translate.instant('burgermainmenu.mycompanyrestaurantlabel'), icon: 'home-icon', command: (event) => {
          this.arrowClick('home');
        }
      },
      {
        label: this.translate.instant('burgermainmenu.allcompanyrestaurantlabel'), icon: 'all-cafeteria-icon',
        routerLink: ['../../cafe/cafeteria-list', 'list-view', { id: this.currentLocation }],
        command: (event) => {
          this.arrowClick('');
        }
      }]

app.module.ts

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

Inside @NgModule below things are already imported

imports: [
    BrowserModule,
    HttpClientModule,
    RouterModule.forRoot(ROUTES, { useHash: true }),
    BrowserAnimationsModule,
    SharedModule,
    TranslateModule.forRoot({
      loader: { provide: TranslateLoader, useClass: CustomLoader }
    }),
    AsyncLocalStorageModule,
    LazyLoadImageModule
  ]

Issue - As per above implementation, I am not able to see icons left to label in side menu.

Any help is appreciable.

Flutterian Flutterian · Accepted Answer · 2018-07-13T11:50:14

I got the solution. I am mentioning step below so in future if someone gets same issue, he can find the solution.

Install font-awesome

npm install --save font-awesome angular-font-awesome
Add font-awesome css file to angular.json inside style element

"styles": [ "./assets/css/styles.scss", "../node_modules/bootstrap/dist/css/bootstrap.min.css", "../node_modules/primeng/resources/primeng.min.css", "../node_modules/font-awesome/css/font-awesome.css", "../node_modules/moment" ]
Now you can execute below command.

npm install
To host the app on localhost, run below command

npm start

Angular4 - p-menu not able to see icons on menu bar

1 Answers