menu item with icons now

package.json

@@ -25,11 +25,11 @@
     "@progress/kendo-angular-l10n": "^2.0.0",
     "@progress/kendo-angular-menu": "^2.0.4",
     "@progress/kendo-angular-popup": "^3.0.0",
+    "@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-svg-icons": "^0.0.3"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.1002.0",

src/app/app.component.html

@@ -1,4 +1,4 @@
-<kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu>
+
 <div class=topMenuBar >
   <kendo-icon [name]="'photo-camera'" [size]="'medium'"></kendo-icon>
   <kendo-menu [items]="items"> </kendo-menu>
@@ -9,3 +9,27 @@
 <div #target class="target">
   <p class="placeholder">Right-click to open Context menu</p>
 </div>
+<kendo-contextmenu [target]="target" [items]="items">  </kendo-contextmenu>
+
+<hr>
+
+<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>
+      </kendo-menu-item>
+      <kendo-menu-item text="resources" icon="folder">
+          <kendo-menu-item text="pdf" icon="folder">
+              <kendo-menu-item text="prices.pdf" icon="pdf"></kendo-menu-item>
+              <kendo-menu-item text="brochure.pdf" icon="pdf"></kendo-menu-item>
+          </kendo-menu-item>
+          <kendo-menu-item text="zip" icon="folder"></kendo-menu-item>
+      </kendo-menu-item>
+      <kendo-menu-item text="about.html" icon="file"></kendo-menu-item>
+      <kendo-menu-item text="contacts.html" icon="file"></kendo-menu-item>
+      <kendo-menu-item text="index.html" icon="file"></kendo-menu-item>
+      <kendo-menu-item text="portfolio.html" icon="file"></kendo-menu-item>
+  </kendo-menu-item>
+</kendo-menu>

src/app/app.module.ts

@@ -5,13 +5,11 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 //Kendo
 import { MenuModule, ContextMenuModule } from '@progress/kendo-angular-menu';
+import { IconsModule } from '@progress/kendo-angular-icons';
 //App
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app-routing.module';
 import { DashboardComponent } from './dashboard/dashboard.component';
-import { IconsModule } from '@progress/kendo-angular-icons';
-
-
 
 @NgModule({
   declarations: [
@@ -24,7 +22,7 @@ import { IconsModule } from '@progress/kendo-angular-icons';
     MenuModule,
     ContextMenuModule,
     BrowserAnimationsModule,
-    IconsModule
+    //IconsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dist/app.module.js

@@ -16,20 +16,22 @@ var kendo_angular_menu_1 = require("@progress/kendo-angular-menu");
 //App
 var app_component_1 = require("./app.component");
 var app_routing_module_1 = require("./app-routing.module");
+var dashboard_component_1 = require("./dashboard/dashboard.component");
 var AppModule = /** @class */ (function () {
     function AppModule() {
     }
     AppModule = __decorate([
         core_1.NgModule({
             declarations: [
-                app_component_1.AppComponent
+                app_component_1.AppComponent,
+                dashboard_component_1.DashboardComponent
             ],
             imports: [
                 platform_browser_1.BrowserModule,
                 app_routing_module_1.AppRoutingModule,
                 kendo_angular_menu_1.MenuModule,
                 kendo_angular_menu_1.ContextMenuModule,
-                animations_1.BrowserAnimationsModule
+                animations_1.BrowserAnimationsModule,
             ],
             providers: [],
             bootstrap: [app_component_1.AppComponent]

src/app/dist/main-menu-items.js

@@ -3,53 +3,63 @@ exports.__esModule = true;
 exports.mainMenuItems = void 0;
 exports.mainMenuItems = [
     {
-        text: 'I'
+        text: '',
+        icon: 'menu'
     },
     {
         text: 'SFM',
-        items: [{ text: 'Summary', url: '/dashboard' }, { text: 'Logout', url: '/login' }]
+        icon: 'more-vertical',
+        items: [
+            { text: 'Summary', icon: 'calculator', url: '/dashboard' },
+            { text: '--', separator: "true" },
+            { text: 'Logout', icon: 'logout', url: '/login' }
+        ]
     },
     {
         text: 'Loans',
+        icon: 'dollar',
         items: [
-            { text: 'Add', url: 'https://google.com.au' },
-            { text: 'List All', url: 'https://google.com.au' },
+            { text: 'Add', icon: 'plus', url: 'https://google.com.au' },
+            { text: 'List All', icon: 'table', url: 'https://google.com.au' },
             { text: '--', separator: "true" },
-            { text: 'Export All Loans' },
+            { text: 'Export All Loans', icon: "excel" },
             { text: '--', separator: "true" },
-            { text: 'Search' }
+            { text: 'Search', icon: 'search' }
         ]
     },
     {
         text: 'Trails',
+        icon: 'percent',
         items: [
-            { text: 'List All', url: 'https://google.com.au' },
+            { text: 'List All', icon: 'table', url: 'https://google.com.au' },
             { text: '--', separator: "true" },
-            { text: 'Import From ...' }
+            { text: 'Import From ...', icon: 'upload' }
         ]
     },
     {
         text: 'Clients',
+        icon: 'document-manager',
         items: [
-            { text: 'Add ', url: 'https://google.com.au' },
-            { text: 'List All' },
+            { text: 'Add ', icon: 'plus', url: 'https://google.com.au' },
+            { text: 'List All', icon: 'table' },
             { text: '--', separator: "true" },
-            { text: 'Search' },
+            { text: 'Search', icon: 'search' },
             { text: '--', separator: "true" },
-            { text: 'Broadcast' },
+            { text: 'Broadcast', icon: 'email' },
         ]
     },
     {
         text: 'Brokers',
+        icon: 'dictionary-add',
         items: [
-            { text: 'Add ', url: 'https://google.com.au' },
-            { text: 'List All' },
+            { text: 'Add ', icon: 'plus', url: 'https://google.com.au' },
+            { text: 'List All', icon: 'table' },
             { text: '--', separator: "true" },
-            { text: 'Search' },
+            { text: 'Search', icon: 'search' },
             { text: '--', separator: "true" },
-            { text: 'Broadcast' },
+            { text: 'Broadcast', icon: 'email' },
             { text: '--', separator: "true" },
-            { text: 'UnPaid' },
+            { text: 'UnPaid', icon: 'dollar' },
         ]
     }
 ];

src/app/main-menu-items.ts

@@ -1,53 +1,62 @@
 export const mainMenuItems: any[] = [
     {
-        text: 'I'
+        text: '',
+        icon: 'menu'
     },
     {
         text: 'SFM',
-        items: [{ text: 'Summary', url: '/dashboard'}, { text: 'Logout', url: '/login'}]
+        icon: 'more-vertical',
+        items: [
+            { text: 'Summary', icon: 'calculator', url: '/dashboard'}, 
+            { text: '--', separator: "true"  }, 
+            { text: 'Logout', icon: 'logout', url: '/login'}]
     },
     {
         text: 'Loans',
+        icon: 'dollar',
         items: [
-            { text: 'Add', url: 'https://google.com.au' }, 
-            { text: 'List All', url: 'https://google.com.au' }, 
+            { text: 'Add', icon: 'plus', url: 'https://google.com.au' }, 
+            { text: 'List All', icon: 'table' ,url: 'https://google.com.au' }, 
             { text: '--', separator: "true"  }, 
-            { text: 'Export All Loans' }, 
+            { text: 'Export All Loans' , icon: "excel"}, 
             { text: '--', separator: "true"  }, 
-            { text: 'Search' }
+            { text: 'Search', icon: 'search' }
         ]
     },
     {
         text: 'Trails',
+        icon: 'percent',
         items: [
-            { text: 'List All', url: 'https://google.com.au' }, 
+            { text: 'List All', icon: 'table', url: 'https://google.com.au' }, 
             { text: '--', separator: "true"  }, 
-            { text: 'Import From ...'}
+            { text: 'Import From ...', icon : 'upload'}
         ]
     },
     {
         text: 'Clients',
+        icon: 'document-manager',
         items: [
-            { text: 'Add ', url: 'https://google.com.au' }, 
-            { text: 'List All' }, 
+            { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, 
+            { text: 'List All', icon: 'table' }, 
             { text: '--', separator: "true"  }, 
-            { text: 'Search' },
+            { text: 'Search' ,icon: 'search'},
             { text: '--', separator: "true"  }, 
-            { text: 'Broadcast' },
+            { text: 'Broadcast', icon:'email' },
         ]
     },
 
     {
         text: 'Brokers',
+        icon: 'dictionary-add',
         items: [
-            { text: 'Add ', url: 'https://google.com.au' }, 
-            { text: 'List All' }, 
+            { text: 'Add ', icon: 'plus', url: 'https://google.com.au' }, 
+            { text: 'List All', icon : 'table' }, 
             { text: '--', separator: "true"  }, 
-            { text: 'Search' },
+            { text: 'Search' , icon: 'search'},
             { text: '--', separator: "true"  }, 
-            { text: 'Broadcast' },
+            { text: 'Broadcast' , icon : 'email'},
             { text: '--', separator: "true"  }, 
-            { text: 'UnPaid' },
+            { text: 'UnPaid', icon : 'dollar' },
         ]
     }
 ];