added fontawesome using ngIf for menuitem

package-lock.json

@@ -1799,6 +1799,35 @@
         "to-fast-properties": "^2.0.0"
       }
     },
+    "@fortawesome/angular-fontawesome": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/angular-fontawesome/-/angular-fontawesome-0.7.0.tgz",
+      "integrity": "sha512-U+eHYbKuVYrrm9SnIfl+z+6KTiI4Pu+S2OKh34JIi7C1jHhDcrVeDZISP/cpswHY7LWWDOPYeKE+yuWFlL4aVw==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.32.tgz",
+      "integrity": "sha512-ux2EDjKMpcdHBVLi/eWZynnPxs0BtFVXJkgHIxXRl+9ZFaHPvYamAfCzeeQFqHRjuJtX90wVnMRaMQAAlctz3w=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.32",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.32.tgz",
+      "integrity": "sha512-XjqyeLCsR/c/usUpdWcOdVtWFVjPbDFBTQkn2fQRrWhhUoxriQohO2RWDxLyUM8XpD+Zzg5xwJ8gqTYGDLeGaQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.1.tgz",
+      "integrity": "sha512-EFMuKtzRMNbvjab/SvJBaOOpaqJfdSap/Nl6hst7CgrJxwfORR1drdTV6q1Ib/JVzq4xObdTDcT6sqTaXMqfdg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.32"
+      }
+    },
     "@istanbuljs/schema": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz",

package.json

@@ -20,27 +20,30 @@
     "@angular/platform-browser": "~10.2.0",
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
+    "@fortawesome/angular-fontawesome": "^0.7.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@progress/kendo-angular-buttons": "^5.0.0",
     "@progress/kendo-angular-common": "^1.0.0",
+    "@progress/kendo-angular-dateinputs": "^4.0.0",
     "@progress/kendo-angular-dialog": "^4.2.2",
+    "@progress/kendo-angular-dropdowns": "^4.0.0",
+    "@progress/kendo-angular-excel-export": "^3.0.0",
     "@progress/kendo-angular-grid": "^4.8.0",
     "@progress/kendo-angular-icons": "^0.2.1",
+    "@progress/kendo-angular-inputs": "^6.0.0",
+    "@progress/kendo-angular-intl": "^2.0.0",
     "@progress/kendo-angular-l10n": "^2.0.0",
     "@progress/kendo-angular-menu": "^2.0.4",
+    "@progress/kendo-angular-pdf-export": "^2.0.0",
     "@progress/kendo-angular-popup": "^3.0.0",
+    "@progress/kendo-data-query": "^1.0.0",
+    "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-svg-icons": "^0.0.3",
     "@progress/kendo-theme-default": "latest",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
-    "zone.js": "~0.10.2",
-    "@progress/kendo-angular-dropdowns": "^4.0.0",
-    "@progress/kendo-angular-inputs": "^6.0.0",
-    "@progress/kendo-angular-intl": "^2.0.0",
-    "@progress/kendo-data-query": "^1.0.0",
-    "@progress/kendo-drawing": "^1.5.12",
-    "@progress/kendo-angular-excel-export": "^3.0.0",
-    "@progress/kendo-angular-dateinputs": "^4.0.0",
-    "@progress/kendo-angular-pdf-export": "^2.0.0"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.0",

src/app/app.component.html

@@ -1,9 +1,15 @@
 
 <div class=topMenuBar >
-  <!-- <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon> -->
-  <kendo-menu [items]="items"> </kendo-menu>
+  <!-- <kendo-icon [name]="'photo-camera'" [size]="'medium'" style="color:yellow;float:left;"></kendo-icon> -->
+  <kendo-menu [items]="items"> 
+    <ng-template kendoMenuItemTemplate let-item="item">
+      <fa-icon  *ngIf="hasFa(item)"  [icon]="item.fa"></fa-icon> &nbsp;
+      {{ item.text }} 
+    </ng-template>
+  </kendo-menu>
 </div>
-
+<fa-icon ngif [icon]="faCoffee"></fa-icon> &nbsp; text
+<fa-icon  [icon]="faCoffee"></fa-icon> &nbsp; text
 <router-outlet></router-outlet>
 
 
@@ -12,6 +18,7 @@
 <kendo-menu>
   <kendo-menu-item text="My Web Site" icon="folder">
       <kendo-menu-item text="images" icon="folder">
+        
           <kendo-menu-item text="logo.png" icon="image"></kendo-menu-item>
           <kendo-menu-item text="body-back.png" icon="image"></kendo-menu-item>
           <kendo-menu-item text="my-photo.png" icon="image"></kendo-menu-item>

src/app/app.component.ts

@@ -1,4 +1,5 @@
 import { Component } from '@angular/core';
+import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 import { mainMenuItems } from './main-menu-items';
 
 @Component({
@@ -7,6 +8,12 @@ import { mainMenuItems } from './main-menu-items';
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
+  faCoffee = faCoffee
   title = 'broker';
   public items: any[] = mainMenuItems;
+
+  public hasFa (item: any) : boolean {
+    console.log(item);
+    return item.hasOwnProperty('fa');
+  }
 }

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { AuthComponent } from './auth/auth.component';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
 
 
@@ -36,7 +37,8 @@ import { AuthComponent } from './auth/auth.component';
     ButtonsModule,
     GridModule,
     InputsModule,
-    IconsModule
+    IconsModule,
+    FontAwesomeModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/main-menu-items.ts

@@ -1,3 +1,5 @@
+import { faCoffee } from '@fortawesome/free-solid-svg-icons';
+
 export const mainMenuItems: any[] = [
     {
         text: '',
@@ -6,6 +8,7 @@ export const mainMenuItems: any[] = [
     {
         text: 'SFM',
         icon: 'more-vertical',
+        fa: faCoffee,
         items: [
             { text: 'Summary', icon: 'calculator', url: './#dashboard'}, 
             { text: '--', separator: "true"  }, 
@@ -34,7 +37,7 @@ export const mainMenuItems: any[] = [
     },
     {
         text: 'Clients',
-        icon: 'document-manager',
+        icon: 'user',
         items: [
             { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, 
             { text: 'List All', icon: 'table' }, 
@@ -47,7 +50,7 @@ export const mainMenuItems: any[] = [
 
     {
         text: 'Brokers',
-        icon: 'dictionary-add',
+        icon: 'user',
         items: [
             { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, 
             { text: 'List All', icon : 'table' },