@progress/kendo-angular-menu 11.0.0-develop.98 → 11.0.0

package/NOTICE.txt

@@ -1,6 +1,6 @@
 Progress Kendo UI for Angular 2023
 
-Copyright (c) 2016-2022 Progress Software Corporation and/or one of its
+Copyright © 2016-2023 Progress Software Corporation and/or one of its
 subsidiaries or affiliates. All rights reserved.
 
 Portions of the Product include certain open source and commercial third-party
@@ -65,7 +65,7 @@ the Product:
 
 (1) 	The Apache Software License, Version 2.0:
 
-Progress Kendo UI for Angular 2022 incorporates TsLib v1.9.3. Such technology
+Progress Kendo UI for Angular 2023 incorporates TsLib v1.9.3. Such technology
 is subject to the following terms and conditions: Apache Software License Version 2.0.
 
                                  Apache License
@@ -290,7 +290,7 @@ is subject to the following terms and conditions: Apache Software License Versio
 
 (2) 	BSD-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates xlf-translate v2.0.4.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates xlf-translate v2.0.4.  Such
 technology is subject to the following terms and conditions:
 
    BSD 3-Clause License
@@ -325,7 +325,7 @@ technology is subject to the following terms and conditions:
 
 (3) 	The ISC License:
 
-(a) Progress Kendo UI for Angular 2022 incorporates glob v7.1.3.  Such technology
+(a) Progress Kendo UI for Angular 2023 incorporates glob v7.1.3.  Such technology
 is subject to the following terms and conditions:
 
     The ISC License
@@ -352,7 +352,7 @@ is subject to the following terms and conditions:
 
 (4)	MIT-Style Licenses:
 
-(a) Progress Kendo UI for Angular 2022 incorporates HammerJS v2.0.8.  Such
+(a) Progress Kendo UI for Angular 2023 incorporates HammerJS v2.0.8.  Such
 technology is subject to the following terms and conditions:
 
    The MIT License (MIT)
@@ -377,7 +377,7 @@ technology is subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(b) Progress Kendo UI for Angular 2022 incorporates prosemirror-commands v1*,
+(b) Progress Kendo UI for Angular 2023 incorporates prosemirror-commands v1*,
 prosemirror-cursor v1*, prosemirror-gapcursor v1*, prosemirror-history v1*,
 prosemirror-inputrules v1*, prosemirror-keymap v1*, prosemirror-model v1*,
 prosemirror-schema-list v1*, prosemirror-state v1*, prosemirror-tables v0.7*,
@@ -404,7 +404,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
    THE SOFTWARE.
 
-(c) Progress Kendo UI for Angular 2022 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
+(c) Progress Kendo UI for Angular 2023 incorporates cheerio v0.2.2.  Such technology is subject to the following terms and conditions:
 
    MIT License
 
@@ -428,7 +428,7 @@ subject to the following terms and conditions:
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
    SOFTWARE.
 
-(d) Progress Kendo UI for Angular 2022 incorporates @types/prosemirror-commands v1*,
+(d) Progress Kendo UI for Angular 2023 incorporates @types/prosemirror-commands v1*,
 @types/prosemirror-dropcursor v1*, @types/prosemirror-gapcursor v1*, @types/prosemirror-history v1*,
 @types/prosemirror-inputrules v1*, @types/prosemirror-keymap v1*, @types/prosemirror-model v1*,
 @types/prosemirror-schema-list v1*, @types/prosemirror-state v1*, @types/prosemirror-tables v0.9*,
@@ -457,7 +457,7 @@ subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
     SOFTWARE.
 
-(e) Progress Kendo UI for Angular 2022 incorporates pako-esm v1.0.0.  Such
+(e) Progress Kendo UI for Angular 2023 incorporates pako-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
   Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -483,7 +483,7 @@ technology is subject to the following terms and conditions:
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 
-(f) Progress Kendo UI for Angular 2022 incorporates jszip-esm v1.0.0.  Such
+(f) Progress Kendo UI for Angular 2023 incorporates jszip-esm v1.0.0.  Such
 technology is subject to the following terms and conditions:
 
     Copyright © 2020 Progress Software Corporation and/or one of its subsidiaries
@@ -510,7 +510,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(g) Progress Kendo UI for Angular 2022 incorporates data.task v3.1.2.  Such
+(g) Progress Kendo UI for Angular 2023 incorporates data.task v3.1.2.  Such
 technology is subject to the following terms and conditions:
 
     The MIT License
@@ -535,7 +535,7 @@ technology is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(h) Progress Kendo UI for Angular 2022 incorporates ramda v0.23.  Such technology
+(h) Progress Kendo UI for Angular 2023 incorporates ramda v0.23.  Such technology
 is subject to the following terms and conditions:
 
     The MIT License (MIT)
@@ -560,7 +560,7 @@ is subject to the following terms and conditions:
     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
     THE SOFTWARE.
 
-(i) Progress Kendo UI for Angular 2022 incorporates js-yaml v3.14.0.  Such
+(i) Progress Kendo UI for Angular 2023 incorporates js-yaml v3.14.0.  Such
 technology is subject to the following terms and conditions:
 
     (The MIT License)
@@ -587,7 +587,7 @@ technology is subject to the following terms and conditions:
 
 (5)	UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE:
 
-Progress Kendo UI for Angular 2022 incorporates Unicode CLDR Database v33.
+Progress Kendo UI for Angular 2023 incorporates Unicode CLDR Database v33.
 Such technology is subject to the following terms and conditions:
 
    UNICODE, INC. LICENSE AGREEMENT - DATA FILES AND SOFTWARE
@@ -605,7 +605,7 @@ Such technology is subject to the following terms and conditions:
 
    COPYRIGHT AND PERMISSION NOTICE
 
-   Copyright © 1991-2021 Unicode, Inc. All rights reserved.
+   Copyright © 1991-2019 Unicode, Inc. All rights reserved.
    Distributed under the Terms of Use in https://www.unicode.org/copyright.html.
 
    Permission is hereby granted, free of charge, to any person obtaining
@@ -642,7 +642,7 @@ incorporated into the Product:  NONE
 
 3. Special Notices Regarding Progress Products incorporated into the Product:
 
-(a) Progress Kendo UI for Angular 2022 incorporates Kendo UI Licensing CLI v1.1
+(a) Progress Kendo UI for Angular 2023 incorporates Kendo UI Licensing CLI v1.1
 from Progress Software Corporation. See NOTICE.txt text file within product for
 third-party license information.
 
@@ -651,4 +651,4 @@ the release notes or other documentation that accompanies updates received in
 connection with support of the Product.
 
 
-Updated 1/6/2022
+Updated 13.Jan.2023

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-item.component.mjs

@@ -87,7 +87,7 @@ export class MenuItemComponent {
     }
 }
 MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuItemComponent, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuItemComponent, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", svgIcon: "svgIcon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -106,6 +106,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], data: [{
                 type: Input
             }], separator: [{

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: 1673460699,
-    version: '',
+    publishDate: 1674032275,
+    version: '11.0.0',
     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;
@@ -446,22 +455,15 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     </ng-template>
 
     <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
         <ng-container *ngIf="!template">
             <span class="k-menu-link-text">{{ item.text }}</span>
         </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: [{
@@ -509,20 +511,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     </ng-template>
 
     <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
         <ng-container *ngIf="!template">
             <span class="k-menu-link-text">{{ item.text }}</span>
         </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,8 +23,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-menu',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460699,
-    version: '',
+    publishDate: 1674032275,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1021,7 +1024,7 @@ class MenuItemComponent {
     }
 }
 MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuItemComponent, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuItemComponent, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", svgIcon: "svgIcon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1040,6 +1043,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], data: [{
                 type: Input
             }], separator: [{
@@ -1155,6 +1160,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 +1484,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,22 +1700,15 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     </ng-template>
 
     <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
         <ng-container *ngIf="!template">
             <span class="k-menu-link-text">{{ item.text }}</span>
         </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,20 +1756,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     </ng-template>
 
     <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
         <ng-container *ngIf="!template">
             <span class="k-menu-link-text">{{ item.text }}</span>
         </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 +2104,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 +2394,7 @@ const COMPONENT_EXPORTS = [
     HierarchyBindingDirective,
     FlatBindingDirective,
     LinkDirective,
-    ExpandArrowDirective
+    ExpandArrowComponent
 ];
 const COMPONENT_DIRECTIVES$1 = [
     ...COMPONENT_EXPORTS,
@@ -2434,8 +2444,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 +2453,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 +3141,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,8 +23,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-menu',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673460699,
-    version: '',
+    publishDate: 1674032275,
+    version: '11.0.0',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1038,7 +1041,7 @@ class MenuItemComponent {
     }
 }
 MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuItemComponent, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: MenuItemComponent, selector: "kendo-menu-item", inputs: { text: "text", url: "url", disabled: "disabled", cssClass: "cssClass", cssStyle: "cssStyle", icon: "icon", svgIcon: "svgIcon", data: "data", separator: "separator" }, queries: [{ propertyName: "itemTemplate", predicate: ItemTemplateDirective }, { propertyName: "itemLinkTemplate", predicate: ItemLinkTemplateDirective }, { propertyName: "itemContentTemplate", predicate: ItemContentTemplateDirective }, { propertyName: "children", predicate: MenuItemComponent }], ngImport: i0, template: ``, isInline: true });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -1057,6 +1060,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], data: [{
                 type: Input
             }], separator: [{
@@ -1172,6 +1177,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 +1478,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;
@@ -1659,22 +1694,15 @@ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
     </ng-template>
 
     <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
         <ng-container *ngIf="!template">
             <span class="k-menu-link-text">{{ item.text }}</span>
         </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: [{
@@ -1722,20 +1750,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     </ng-template>
 
     <ng-template #itemcontent>
-        <span *ngIf="item.icon" class="k-icon" [ngClass]="iconClass" role="presentation"></span>
+        <kendo-icon-wrapper *ngIf="item.icon || item.svgIcon" [name]="item.icon" [svgIcon]="item.svgIcon" role="presentation"></kendo-icon-wrapper>
         <ng-container *ngIf="!template">
             <span class="k-menu-link-text">{{ item.text }}</span>
         </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 +2094,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 +2384,7 @@ const COMPONENT_EXPORTS = [
     HierarchyBindingDirective,
     FlatBindingDirective,
     LinkDirective,
-    ExpandArrowDirective
+    ExpandArrowComponent
 ];
 const COMPONENT_DIRECTIVES$1 = [
     ...COMPONENT_EXPORTS,
@@ -2424,8 +2434,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 +2443,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 +3129,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-item.component.d.ts

@@ -7,6 +7,7 @@ import { ItemTemplateDirective } from './templates/item-template.directive';
 import { ItemLinkTemplateDirective } from './templates/item-link-template.directive';
 import { ItemContentTemplateDirective } from './templates/item-content-template.directive';
 import { MenuItem } from './menu-item.interface';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * A component that can be used to specify the Menu items
@@ -60,6 +61,7 @@ export declare class MenuItemComponent implements MenuItem {
     cssClass: any;
     cssStyle: any;
     icon: string;
+    svgIcon: SVGIcon;
     data: any;
     separator: boolean;
     /**
@@ -95,5 +97,5 @@ export declare class MenuItemComponent implements MenuItem {
      */
     get items(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<MenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemComponent, "kendo-menu-item", never, { "text": "text"; "url": "url"; "disabled": "disabled"; "cssClass": "cssClass"; "cssStyle": "cssStyle"; "icon": "icon"; "data": "data"; "separator": "separator"; }, {}, ["itemTemplate", "itemLinkTemplate", "itemContentTemplate", "children"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MenuItemComponent, "kendo-menu-item", never, { "text": "text"; "url": "url"; "disabled": "disabled"; "cssClass": "cssClass"; "cssStyle": "cssStyle"; "icon": "icon"; "svgIcon": "svgIcon"; "data": "data"; "separator": "separator"; }, {}, ["itemTemplate", "itemLinkTemplate", "itemContentTemplate", "children"], never>;
 }

package/menu-item.interface.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { TemplateRef } from '@angular/core';
+import { SVGIcon } from '@progress/kendo-angular-icons';
 /**
  * An interface for the Menu items.
  */
@@ -21,6 +22,11 @@ export interface MenuItem {
      * be rendered for the item ([see example]({% slug items_menu %}#toc-icon)).
      */
     icon?: string;
+    /**
+     * Defines an [`SVGIcon`](slug:api_icons_svgicon) that will be
+     * rendered for the item using a [`KendoSVGIcon`](slug:api_icons_svgiconcomponent) component.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies if the item is disabled ([see example]({% slug items_menu %}#toc-disabled-state)).
      */

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.98",
+  "version": "11.0.0",
   "description": "Kendo UI Angular Menu component",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,14 +23,15 @@
     "@angular/core": "13 - 15",
     "@angular/platform-browser": "13 - 15",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-common": "11.0.0-develop.98",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.98",
-    "@progress/kendo-angular-popup": "11.0.0-develop.98",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.98",
+    "@progress/kendo-angular-common": "11.0.0",
+    "@progress/kendo-angular-l10n": "11.0.0",
+    "@progress/kendo-angular-icons": "11.0.0",
+    "@progress/kendo-angular-popup": "11.0.0",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {
-    "tslib": "^2.3.1"
+    "tslib": "^2.3.1",
+    "@progress/kendo-angular-schematics": "11.0.0"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2015/progress-kendo-angular-menu.mjs",

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;