@progress/kendo-angular-menu 11.0.0-develop.97 → 11.0.0-develop.99

package/esm2020/index.mjs

@@ -5,7 +5,7 @@
 export { MenuComponent } from './menu.component';
 export { ListComponent, ItemComponent } from './rendering/list.component';
 export { LinkDirective } from './rendering/link.directive';
-export { ExpandArrowDirective } from './rendering/arrow.directive';
+export { ExpandArrowComponent } from './rendering/arrow.component';
 export { MenuItemComponent } from './menu-item.component';
 export { MenuEvent } from './menu-event';
 export { MenuSelectEvent } from './menu-select-event';

package/esm2020/menu.module.mjs

@@ -9,12 +9,13 @@ import { MenuComponent } from './menu.component';
 import { MenuItemComponent } from './menu-item.component';
 import { ListComponent, ItemComponent } from './rendering/list.component';
 import { LinkDirective } from './rendering/link.directive';
-import { ExpandArrowDirective } from './rendering/arrow.directive';
+import { ExpandArrowComponent } from './rendering/arrow.component';
 import { ItemTemplateDirective } from './templates/item-template.directive';
 import { ItemLinkTemplateDirective } from './templates/item-link-template.directive';
 import { ItemContentTemplateDirective } from './templates/item-content-template.directive';
 import { HierarchyBindingDirective } from './data-binding/hierachy-binding.directive';
 import { FlatBindingDirective } from './data-binding/flat-binding.directive';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 const COMPONENT_EXPORTS = [
     MenuComponent,
@@ -25,7 +26,7 @@ const COMPONENT_EXPORTS = [
     HierarchyBindingDirective,
     FlatBindingDirective,
     LinkDirective,
-    ExpandArrowDirective
+    ExpandArrowComponent
 ];
 const COMPONENT_DIRECTIVES = [
     ...COMPONENT_EXPORTS,
@@ -75,8 +76,8 @@ MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         HierarchyBindingDirective,
         FlatBindingDirective,
         LinkDirective,
-        ExpandArrowDirective, ListComponent,
-        ItemComponent], imports: [PopupModule, CommonModule], exports: [MenuComponent,
+        ExpandArrowComponent, ListComponent,
+        ItemComponent], imports: [PopupModule, CommonModule, IconsModule], exports: [MenuComponent,
         MenuItemComponent,
         ItemTemplateDirective,
         ItemLinkTemplateDirective,
@@ -84,13 +85,13 @@ MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         HierarchyBindingDirective,
         FlatBindingDirective,
         LinkDirective,
-        ExpandArrowDirective] });
-MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, imports: [[PopupModule, CommonModule]] });
+        ExpandArrowComponent] });
+MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, imports: [[PopupModule, CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES],
                     exports: [COMPONENT_EXPORTS],
-                    imports: [PopupModule, CommonModule]
+                    imports: [PopupModule, CommonModule, IconsModule]
                 }]
         }] });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-menu',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673459118,
+    publishDate: 1673466761,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/rendering/{arrow.directive.mjs → arrow.component.mjs}

@@ -2,49 +2,40 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Directive, Input, HostBinding, isDevMode, ElementRef, Renderer2 } from '@angular/core';
+import { Input, HostBinding, isDevMode, Component } from '@angular/core';
 import { ItemsService } from '../services/items.service';
+import { getFontIcon, getSVGIcon } from '../utils';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/items.service";
+import * as i2 from "@progress/kendo-angular-icons";
 /**
- * Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
+ * Represents a component that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
  * of the items to render the default expand arrow.
  */
-export class ExpandArrowDirective {
-    constructor(itemsService, element, renderer) {
+export class ExpandArrowComponent {
+    constructor(itemsService) {
         this.itemsService = itemsService;
-        this.element = element;
-        this.renderer = renderer;
         this.hostClasses = true;
         this.role = 'presentation';
     }
     ngOnInit() {
         if (isDevMode() && !this.index) {
-            throw new Error('The kendoMenuExpandArrow directive requires the item index to be set.');
+            throw new Error('The kendoMenuExpandArrow component requires the item index to be set.');
         }
         this.item = this.itemsService.get(this.index) || {};
-        this.createIconElement();
-    }
-    createIconElement() {
-        const iconClass = this.item.horizontal ?
-            this.item.rtl ?
-                'k-i-arrow-60-left' :
-                'k-i-arrow-60-right' :
-            'k-i-arrow-60-down';
-        const iconElement = this.renderer.createElement('span');
-        this.renderer.addClass(iconElement, 'k-icon');
-        this.renderer.addClass(iconElement, iconClass);
-        this.renderer.appendChild(this.element.nativeElement, iconElement);
+        this.fontIcon = getFontIcon(this.item.horizontal, this.item.rtl);
+        this.SVGIcon = getSVGIcon(this.item.horizontal, this.item.rtl);
     }
 }
-ExpandArrowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowDirective, deps: [{ token: i1.ItemsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ExpandArrowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ExpandArrowDirective, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowDirective, decorators: [{
-            type: Directive,
+ExpandArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: i1.ItemsService }], target: i0.ɵɵFactoryTarget.Component });
+ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[kendoMenuExpandArrow]'
+                    selector: '[kendoMenuExpandArrow]',
+                    template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`
                 }]
-        }], ctorParameters: function () { return [{ type: i1.ItemsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+        }], ctorParameters: function () { return [{ type: i1.ItemsService }]; }, propDecorators: { index: [{
                 type: Input,
                 args: ['kendoMenuExpandArrow']
             }], hostClasses: [{

package/esm2020/rendering/list.component.mjs

@@ -13,7 +13,7 @@ import { ActionsService } from '../services/actions.service';
 import { HoverService } from '../services/hover.service';
 import { ItemsService } from '../services/items.service';
 import { NavigationService } from '../services/navigation.service';
-import { bodyFactory, getSizeClass } from '../utils';
+import { bodyFactory, getFontIcon, getSizeClass, getSVGIcon } from '../utils';
 import { POPUP_SETTINGS, POPUP_SETTINGS_RTL } from './popup-settings';
 import * as i0 from "@angular/core";
 import * as i1 from "../services/items.service";
@@ -23,6 +23,7 @@ import * as i4 from "../services/navigation.service";
 import * as i5 from "@angular/common";
 import * as i6 from "@progress/kendo-angular-popup";
 import * as i7 from "../context-menu/context-menu.service";
+import * as i8 from "@progress/kendo-angular-icons";
 /* eslint-disable @angular-eslint/component-selector */
 /**
  * @hidden
@@ -238,6 +239,14 @@ export class ItemComponent {
         this.animate = true;
         this.size = 'medium';
         this.openOnClick = false;
+        /**
+         * @hidden
+         */
+        this.fontIcon = getFontIcon;
+        /**
+         * @hidden
+         */
+        this.SVGIcon = getSVGIcon;
         this.opened = false;
         this.navigating = false;
         this.destroyed = false;
@@ -452,16 +461,9 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </ng-container>
         <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
         </ng-template>
-        <span *ngIf="hasContent" class="k-menu-expand-arrow" role="presentation">
-            <span class="k-icon"
-                [class.k-i-arrow-60-down]="!horizontal"
-                [class.k-i-arrow-60-right]="horizontal && !rtl"
-                [class.k-i-arrow-60-left]="horizontal && rtl"
-            >
-            </span>
-        </span>
+        <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
     </ng-template>
-  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -515,14 +517,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-container>
         <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
         </ng-template>
-        <span *ngIf="hasContent" class="k-menu-expand-arrow" role="presentation">
-            <span class="k-icon"
-                [class.k-i-arrow-60-down]="!horizontal"
-                [class.k-i-arrow-60-right]="horizontal && !rtl"
-                [class.k-i-arrow-60-left]="horizontal && rtl"
-            >
-            </span>
-        </span>
+        <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
     </ng-template>
   `
                 }]

package/esm2020/utils.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef } from '@angular/core';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -27,3 +28,25 @@ export const getSizeClass = (size) => {
     };
     return SIZE_CLASSES[size];
 };
+/**
+ * @hidden
+ */
+export const getFontIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            'caret-alt-left' :
+            'caret-alt-right' :
+        'caret-alt-down';
+    return icon;
+};
+/**
+ * @hidden
+ */
+export const getSVGIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            caretAltLeftIcon :
+            caretAltRightIcon :
+        caretAltDownIcon;
+    return icon;
+};

package/fesm2015/progress-kendo-angular-menu.mjs

@@ -8,10 +8,13 @@ import * as i3 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { PreventableEvent as PreventableEvent$1, hasObservers, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
+import { caretAltLeftIcon, caretAltRightIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i6 from '@progress/kendo-angular-popup';
 import { PopupService, POPUP_CONTAINER, PopupModule } from '@progress/kendo-angular-popup';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /**
  * @hidden
@@ -20,7 +23,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-menu',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673459118,
+    publishDate: 1673466761,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1155,6 +1158,28 @@ const getSizeClass = (size) => {
     };
     return SIZE_CLASSES[size];
 };
+/**
+ * @hidden
+ */
+const getFontIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            'caret-alt-left' :
+            'caret-alt-right' :
+        'caret-alt-down';
+    return icon;
+};
+/**
+ * @hidden
+ */
+const getSVGIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            caretAltLeftIcon :
+            caretAltRightIcon :
+        caretAltDownIcon;
+    return icon;
+};
 
 /**
  * @hidden
@@ -1457,6 +1482,14 @@ class ItemComponent {
         this.animate = true;
         this.size = 'medium';
         this.openOnClick = false;
+        /**
+         * @hidden
+         */
+        this.fontIcon = getFontIcon;
+        /**
+         * @hidden
+         */
+        this.SVGIcon = getSVGIcon;
         this.opened = false;
         this.navigating = false;
         this.destroyed = false;
@@ -1671,16 +1704,9 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </ng-container>
         <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
         </ng-template>
-        <span *ngIf="hasContent" class="k-menu-expand-arrow" role="presentation">
-            <span class="k-icon"
-                [class.k-i-arrow-60-down]="!horizontal"
-                [class.k-i-arrow-60-right]="horizontal && !rtl"
-                [class.k-i-arrow-60-left]="horizontal && rtl"
-            >
-            </span>
-        </span>
+        <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
     </ng-template>
-  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1734,14 +1760,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-container>
         <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
         </ng-template>
-        <span *ngIf="hasContent" class="k-menu-expand-arrow" role="presentation">
-            <span class="k-icon"
-                [class.k-i-arrow-60-down]="!horizontal"
-                [class.k-i-arrow-60-right]="horizontal && !rtl"
-                [class.k-i-arrow-60-left]="horizontal && rtl"
-            >
-            </span>
-        </span>
+        <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
     </ng-template>
   `
                 }]
@@ -2083,44 +2102,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 /**
- * Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
+ * Represents a component that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
  * of the items to render the default expand arrow.
  */
-class ExpandArrowDirective {
-    constructor(itemsService, element, renderer) {
+class ExpandArrowComponent {
+    constructor(itemsService) {
         this.itemsService = itemsService;
-        this.element = element;
-        this.renderer = renderer;
         this.hostClasses = true;
         this.role = 'presentation';
     }
     ngOnInit() {
         if (isDevMode() && !this.index) {
-            throw new Error('The kendoMenuExpandArrow directive requires the item index to be set.');
+            throw new Error('The kendoMenuExpandArrow component requires the item index to be set.');
         }
         this.item = this.itemsService.get(this.index) || {};
-        this.createIconElement();
-    }
-    createIconElement() {
-        const iconClass = this.item.horizontal ?
-            this.item.rtl ?
-                'k-i-arrow-60-left' :
-                'k-i-arrow-60-right' :
-            'k-i-arrow-60-down';
-        const iconElement = this.renderer.createElement('span');
-        this.renderer.addClass(iconElement, 'k-icon');
-        this.renderer.addClass(iconElement, iconClass);
-        this.renderer.appendChild(this.element.nativeElement, iconElement);
+        this.fontIcon = getFontIcon(this.item.horizontal, this.item.rtl);
+        this.SVGIcon = getSVGIcon(this.item.horizontal, this.item.rtl);
     }
 }
-ExpandArrowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowDirective, deps: [{ token: ItemsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ExpandArrowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ExpandArrowDirective, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowDirective, decorators: [{
-            type: Directive,
+ExpandArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Component });
+ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[kendoMenuExpandArrow]'
+                    selector: '[kendoMenuExpandArrow]',
+                    template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`
                 }]
-        }], ctorParameters: function () { return [{ type: ItemsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+        }], ctorParameters: function () { return [{ type: ItemsService }]; }, propDecorators: { index: [{
                 type: Input,
                 args: ['kendoMenuExpandArrow']
             }], hostClasses: [{
@@ -2384,7 +2392,7 @@ const COMPONENT_EXPORTS = [
     HierarchyBindingDirective,
     FlatBindingDirective,
     LinkDirective,
-    ExpandArrowDirective
+    ExpandArrowComponent
 ];
 const COMPONENT_DIRECTIVES$1 = [
     ...COMPONENT_EXPORTS,
@@ -2434,8 +2442,8 @@ MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         HierarchyBindingDirective,
         FlatBindingDirective,
         LinkDirective,
-        ExpandArrowDirective, ListComponent,
-        ItemComponent], imports: [PopupModule, CommonModule], exports: [MenuComponent,
+        ExpandArrowComponent, ListComponent,
+        ItemComponent], imports: [PopupModule, CommonModule, IconsModule], exports: [MenuComponent,
         MenuItemComponent,
         ItemTemplateDirective,
         ItemLinkTemplateDirective,
@@ -2443,14 +2451,14 @@ MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         HierarchyBindingDirective,
         FlatBindingDirective,
         LinkDirective,
-        ExpandArrowDirective] });
-MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, imports: [[PopupModule, CommonModule]] });
+        ExpandArrowComponent] });
+MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, imports: [[PopupModule, CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$1],
                     exports: [COMPONENT_EXPORTS],
-                    imports: [PopupModule, CommonModule]
+                    imports: [PopupModule, CommonModule, IconsModule]
                 }]
         }] });
 
@@ -3131,5 +3139,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ContextMenuComponent, ContextMenuEvent, ContextMenuModule, ContextMenuPopupEvent, ContextMenuSelectEvent, ContextMenuService, ContextMenuTargetContainerDirective, ContextMenuTargetDirective, ContextMenuTemplateDirective, ExpandArrowDirective, FlatBindingDirective, HierarchyBindingDirective, ItemComponent, ItemContentTemplateDirective, ItemLinkTemplateDirective, ItemTemplateDirective, ItemsService, LinkDirective, ListComponent, MenuComponent, MenuEvent, MenuItemComponent, MenuModule, MenuSelectEvent, MenusModule };
+export { ContextMenuComponent, ContextMenuEvent, ContextMenuModule, ContextMenuPopupEvent, ContextMenuSelectEvent, ContextMenuService, ContextMenuTargetContainerDirective, ContextMenuTargetDirective, ContextMenuTemplateDirective, ExpandArrowComponent, FlatBindingDirective, HierarchyBindingDirective, ItemComponent, ItemContentTemplateDirective, ItemLinkTemplateDirective, ItemTemplateDirective, ItemsService, LinkDirective, ListComponent, MenuComponent, MenuEvent, MenuItemComponent, MenuModule, MenuSelectEvent, MenusModule };
 

package/fesm2020/progress-kendo-angular-menu.mjs

@@ -8,10 +8,13 @@ import * as i3 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { PreventableEvent as PreventableEvent$1, hasObservers, isDocumentAvailable, Keys } from '@progress/kendo-angular-common';
+import { caretAltLeftIcon, caretAltRightIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
 import * as i6 from '@progress/kendo-angular-popup';
 import { PopupService, POPUP_CONTAINER, PopupModule } from '@progress/kendo-angular-popup';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import * as i8 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /**
  * @hidden
@@ -20,7 +23,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-menu',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673459118,
+    publishDate: 1673466761,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1172,6 +1175,28 @@ const getSizeClass = (size) => {
     };
     return SIZE_CLASSES[size];
 };
+/**
+ * @hidden
+ */
+const getFontIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            'caret-alt-left' :
+            'caret-alt-right' :
+        'caret-alt-down';
+    return icon;
+};
+/**
+ * @hidden
+ */
+const getSVGIcon = (horizontal, rtl) => {
+    const icon = horizontal ?
+        rtl ?
+            caretAltLeftIcon :
+            caretAltRightIcon :
+        caretAltDownIcon;
+    return icon;
+};
 
 const POPUP_ALIGN = {
     vertical: 'top',
@@ -1451,6 +1476,14 @@ class ItemComponent {
         this.animate = true;
         this.size = 'medium';
         this.openOnClick = false;
+        /**
+         * @hidden
+         */
+        this.fontIcon = getFontIcon;
+        /**
+         * @hidden
+         */
+        this.SVGIcon = getSVGIcon;
         this.opened = false;
         this.navigating = false;
         this.destroyed = false;
@@ -1665,16 +1698,9 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         </ng-container>
         <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
         </ng-template>
-        <span *ngIf="hasContent" class="k-menu-expand-arrow" role="presentation">
-            <span class="k-icon"
-                [class.k-i-arrow-60-down]="!horizontal"
-                [class.k-i-arrow-60-right]="horizontal && !rtl"
-                [class.k-i-arrow-60-left]="horizontal && rtl"
-            >
-            </span>
-        </span>
+        <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
     </ng-template>
-  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, components: [{ type: ListComponent, selector: "[kendoMenuList]", inputs: ["items", "level", "index", "animate", "size", "vertical", "rtl", "openOnClick", "itemTemplate", "itemLinkTemplate"] }, { type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1728,14 +1754,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </ng-container>
         <ng-template *ngIf="template" [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{ item: item, index: index }">
         </ng-template>
-        <span *ngIf="hasContent" class="k-menu-expand-arrow" role="presentation">
-            <span class="k-icon"
-                [class.k-i-arrow-60-down]="!horizontal"
-                [class.k-i-arrow-60-right]="horizontal && !rtl"
-                [class.k-i-arrow-60-left]="horizontal && rtl"
-            >
-            </span>
-        </span>
+        <kendo-icon-wrapper *ngIf="hasContent" [name]="fontIcon(horizontal, rtl)" [svgIcon]="SVGIcon(horizontal, rtl)" class="k-menu-expand-arrow" role="presentation"></kendo-icon-wrapper>
     </ng-template>
   `
                 }]
@@ -2073,44 +2092,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }] } });
 
 /**
- * Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
+ * Represents a component that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
  * of the items to render the default expand arrow.
  */
-class ExpandArrowDirective {
-    constructor(itemsService, element, renderer) {
+class ExpandArrowComponent {
+    constructor(itemsService) {
         this.itemsService = itemsService;
-        this.element = element;
-        this.renderer = renderer;
         this.hostClasses = true;
         this.role = 'presentation';
     }
     ngOnInit() {
         if (isDevMode() && !this.index) {
-            throw new Error('The kendoMenuExpandArrow directive requires the item index to be set.');
+            throw new Error('The kendoMenuExpandArrow component requires the item index to be set.');
         }
         this.item = this.itemsService.get(this.index) || {};
-        this.createIconElement();
-    }
-    createIconElement() {
-        const iconClass = this.item.horizontal ?
-            this.item.rtl ?
-                'k-i-arrow-60-left' :
-                'k-i-arrow-60-right' :
-            'k-i-arrow-60-down';
-        const iconElement = this.renderer.createElement('span');
-        this.renderer.addClass(iconElement, 'k-icon');
-        this.renderer.addClass(iconElement, iconClass);
-        this.renderer.appendChild(this.element.nativeElement, iconElement);
+        this.fontIcon = getFontIcon(this.item.horizontal, this.item.rtl);
+        this.SVGIcon = getSVGIcon(this.item.horizontal, this.item.rtl);
     }
 }
-ExpandArrowDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowDirective, deps: [{ token: ItemsService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-ExpandArrowDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ExpandArrowDirective, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowDirective, decorators: [{
-            type: Directive,
+ExpandArrowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowComponent, deps: [{ token: ItemsService }], target: i0.ɵɵFactoryTarget.Component });
+ExpandArrowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExpandArrowComponent, selector: "[kendoMenuExpandArrow]", inputs: { index: ["kendoMenuExpandArrow", "index"] }, host: { properties: { "class.k-menu-expand-arrow": "this.hostClasses", "attr.role": "this.role" } }, ngImport: i0, template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`, isInline: true, components: [{ type: i8.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpandArrowComponent, decorators: [{
+            type: Component,
             args: [{
-                    selector: '[kendoMenuExpandArrow]'
+                    selector: '[kendoMenuExpandArrow]',
+                    template: `<kendo-icon-wrapper [name]="fontIcon" [svgIcon]="SVGIcon"></kendo-icon-wrapper>`
                 }]
-        }], ctorParameters: function () { return [{ type: ItemsService }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { index: [{
+        }], ctorParameters: function () { return [{ type: ItemsService }]; }, propDecorators: { index: [{
                 type: Input,
                 args: ['kendoMenuExpandArrow']
             }], hostClasses: [{
@@ -2374,7 +2382,7 @@ const COMPONENT_EXPORTS = [
     HierarchyBindingDirective,
     FlatBindingDirective,
     LinkDirective,
-    ExpandArrowDirective
+    ExpandArrowComponent
 ];
 const COMPONENT_DIRECTIVES$1 = [
     ...COMPONENT_EXPORTS,
@@ -2424,8 +2432,8 @@ MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         HierarchyBindingDirective,
         FlatBindingDirective,
         LinkDirective,
-        ExpandArrowDirective, ListComponent,
-        ItemComponent], imports: [PopupModule, CommonModule], exports: [MenuComponent,
+        ExpandArrowComponent, ListComponent,
+        ItemComponent], imports: [PopupModule, CommonModule, IconsModule], exports: [MenuComponent,
         MenuItemComponent,
         ItemTemplateDirective,
         ItemLinkTemplateDirective,
@@ -2433,14 +2441,14 @@ MenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13
         HierarchyBindingDirective,
         FlatBindingDirective,
         LinkDirective,
-        ExpandArrowDirective] });
-MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, imports: [[PopupModule, CommonModule]] });
+        ExpandArrowComponent] });
+MenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, imports: [[PopupModule, CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENT_DIRECTIVES$1],
                     exports: [COMPONENT_EXPORTS],
-                    imports: [PopupModule, CommonModule]
+                    imports: [PopupModule, CommonModule, IconsModule]
                 }]
         }] });
 
@@ -3119,5 +3127,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ContextMenuComponent, ContextMenuEvent, ContextMenuModule, ContextMenuPopupEvent, ContextMenuSelectEvent, ContextMenuService, ContextMenuTargetContainerDirective, ContextMenuTargetDirective, ContextMenuTemplateDirective, ExpandArrowDirective, FlatBindingDirective, HierarchyBindingDirective, ItemComponent, ItemContentTemplateDirective, ItemLinkTemplateDirective, ItemTemplateDirective, ItemsService, LinkDirective, ListComponent, MenuComponent, MenuEvent, MenuItemComponent, MenuModule, MenuSelectEvent, MenusModule };
+export { ContextMenuComponent, ContextMenuEvent, ContextMenuModule, ContextMenuPopupEvent, ContextMenuSelectEvent, ContextMenuService, ContextMenuTargetContainerDirective, ContextMenuTargetDirective, ContextMenuTemplateDirective, ExpandArrowComponent, FlatBindingDirective, HierarchyBindingDirective, ItemComponent, ItemContentTemplateDirective, ItemLinkTemplateDirective, ItemTemplateDirective, ItemsService, LinkDirective, ListComponent, MenuComponent, MenuEvent, MenuItemComponent, MenuModule, MenuSelectEvent, MenusModule };
 

package/index.d.ts

@@ -5,7 +5,7 @@
 export { MenuComponent } from './menu.component';
 export { ListComponent, ItemComponent } from './rendering/list.component';
 export { LinkDirective } from './rendering/link.directive';
-export { ExpandArrowDirective } from './rendering/arrow.directive';
+export { ExpandArrowComponent } from './rendering/arrow.component';
 export { MenuItemComponent } from './menu-item.component';
 export { MenuAnimation } from './menu-animation.interface';
 export { MenuItem } from './menu-item.interface';

package/menu.module.d.ts

@@ -11,10 +11,11 @@ import * as i5 from "./templates/item-content-template.directive";
 import * as i6 from "./data-binding/hierachy-binding.directive";
 import * as i7 from "./data-binding/flat-binding.directive";
 import * as i8 from "./rendering/link.directive";
-import * as i9 from "./rendering/arrow.directive";
+import * as i9 from "./rendering/arrow.component";
 import * as i10 from "./rendering/list.component";
 import * as i11 from "@progress/kendo-angular-popup";
 import * as i12 from "@angular/common";
+import * as i13 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Menu component.
@@ -49,6 +50,6 @@ import * as i12 from "@angular/common";
  */
 export declare class MenuModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MenuModule, [typeof i1.MenuComponent, typeof i2.MenuItemComponent, typeof i3.ItemTemplateDirective, typeof i4.ItemLinkTemplateDirective, typeof i5.ItemContentTemplateDirective, typeof i6.HierarchyBindingDirective, typeof i7.FlatBindingDirective, typeof i8.LinkDirective, typeof i9.ExpandArrowDirective, typeof i10.ListComponent, typeof i10.ItemComponent], [typeof i11.PopupModule, typeof i12.CommonModule], [typeof i1.MenuComponent, typeof i2.MenuItemComponent, typeof i3.ItemTemplateDirective, typeof i4.ItemLinkTemplateDirective, typeof i5.ItemContentTemplateDirective, typeof i6.HierarchyBindingDirective, typeof i7.FlatBindingDirective, typeof i8.LinkDirective, typeof i9.ExpandArrowDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MenuModule, [typeof i1.MenuComponent, typeof i2.MenuItemComponent, typeof i3.ItemTemplateDirective, typeof i4.ItemLinkTemplateDirective, typeof i5.ItemContentTemplateDirective, typeof i6.HierarchyBindingDirective, typeof i7.FlatBindingDirective, typeof i8.LinkDirective, typeof i9.ExpandArrowComponent, typeof i10.ListComponent, typeof i10.ItemComponent], [typeof i11.PopupModule, typeof i12.CommonModule, typeof i13.IconsModule], [typeof i1.MenuComponent, typeof i2.MenuItemComponent, typeof i3.ItemTemplateDirective, typeof i4.ItemLinkTemplateDirective, typeof i5.ItemContentTemplateDirective, typeof i6.HierarchyBindingDirective, typeof i7.FlatBindingDirective, typeof i8.LinkDirective, typeof i9.ExpandArrowComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MenuModule>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-menu",
-  "version": "11.0.0-develop.97",
+  "version": "11.0.0-develop.99",
   "description": "Kendo UI Angular Menu component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,10 +23,11 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "11.0.0-develop.97",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.97",
-    "@progress/kendo-angular-popup": "11.0.0-develop.97",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.97",
+    "@progress/kendo-angular-common": "11.0.0-develop.99",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.99",
+    "@progress/kendo-angular-icons": "11.0.0-develop.99",
+    "@progress/kendo-angular-popup": "11.0.0-develop.99",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.99",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {

package/rendering/{arrow.directive.d.ts → arrow.component.d.ts}

@@ -2,17 +2,16 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { OnInit, ElementRef, Renderer2 } from '@angular/core';
+import { OnInit } from '@angular/core';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ItemsService } from '../services/items.service';
 import * as i0 from "@angular/core";
 /**
- * Represents a directive that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
+ * Represents a component that can be used in the [`linkTemplate`]({% slug api_menu_itemlinktemplatedirective %})
  * of the items to render the default expand arrow.
  */
-export declare class ExpandArrowDirective implements OnInit {
+export declare class ExpandArrowComponent implements OnInit {
     private itemsService;
-    private element;
-    private renderer;
     /**
      * The index of the Menu item. The input is mandatory.
      */
@@ -20,9 +19,16 @@ export declare class ExpandArrowDirective implements OnInit {
     hostClasses: boolean;
     role: string;
     private item;
-    constructor(itemsService: ItemsService, element: ElementRef, renderer: Renderer2);
+    /**
+     * @hidden
+     */
+    fontIcon: string;
+    /**
+     * @hidden
+     */
+    SVGIcon: SVGIcon;
+    constructor(itemsService: ItemsService);
     ngOnInit(): void;
-    private createIconElement;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ExpandArrowDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ExpandArrowDirective, "[kendoMenuExpandArrow]", never, { "index": "kendoMenuExpandArrow"; }, {}, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ExpandArrowComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ExpandArrowComponent, "[kendoMenuExpandArrow]", never, { "index": "kendoMenuExpandArrow"; }, {}, never, never>;
 }

package/rendering/list.component.d.ts

@@ -12,6 +12,7 @@ import { ActionsService } from '../services/actions.service';
 import { HoverService } from '../services/hover.service';
 import { ItemsService } from '../services/items.service';
 import { NavigationService } from '../services/navigation.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -88,6 +89,14 @@ export declare class ItemComponent {
     get menuListClasses(): string;
     get children(): any[];
     get template(): TemplateRef<any>;
+    /**
+     * @hidden
+     */
+    fontIcon: (horizontal: boolean, rtl: boolean) => string;
+    /**
+     * @hidden
+     */
+    SVGIcon: (horizontal: boolean, rtl: boolean) => SVGIcon;
     opened: boolean;
     navigating: boolean;
     childId: string;

package/schematics/ngAdd/index.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 function default_1(options) {
-    const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'MenuModule', package: 'menu' //package name, e.g grid
-     });
+    const finalOptions = Object.assign(Object.assign({}, options), { mainNgModule: 'MenuModule', package: 'menu', peerDependencies: {
+            // Peer dependency of icons
+            "@progress/kendo-svg-icons": "^1.0.0"
+        } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }
 exports.default = default_1;

package/utils.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { ElementRef } from '@angular/core';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { MenuSize } from './size';
 /**
  * @hidden
@@ -16,3 +17,11 @@ export declare const bodyFactory: () => ElementRef;
  * @hidden
  */
 export declare const getSizeClass: (size: MenuSize) => string;
+/**
+ * @hidden
+ */
+export declare const getFontIcon: (horizontal: boolean, rtl: boolean) => string;
+/**
+ * @hidden
+ */
+export declare const getSVGIcon: (horizontal: boolean, rtl: boolean) => SVGIcon;