@progress/kendo-angular-layout 11.0.0-develop.102 → 11.0.0-develop.104

package/avatar/avatar.component.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { OnInit, Renderer2, ElementRef, AfterViewInit } from '@angular/core';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { AvatarFillMode, AvatarShape, AvatarSize, AvatarThemeColor, AvatarRounded } from './models/models';
 import * as i0 from "@angular/core";
 /**
@@ -131,17 +132,20 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
      * Sets the `image` source of the avatar.
      */
     imageSrc: string;
+    /**
+     * Defines an SVGIcon to be rendered.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon: SVGIcon);
+    get svgIcon(): SVGIcon;
     private _themeColor;
     private _size;
     private _fillMode;
     private _rounded;
+    private _svgIcon;
     constructor(renderer: Renderer2, element: ElementRef);
     ngOnInit(): void;
     ngAfterViewInit(): void;
-    /**
-     * @hidden
-     */
-    iconClasses(): string;
     /**
      * @hidden
      */
@@ -150,5 +154,5 @@ export declare class AvatarComponent implements OnInit, AfterViewInit {
     private handleClasses;
     private handleFillModeAndThemeColorClasses;
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "kendo-avatar", never, { "shape": "shape"; "size": "size"; "rounded": "rounded"; "themeColor": "themeColor"; "fillMode": "fillMode"; "fill": "fill"; "border": "border"; "iconClass": "iconClass"; "width": "width"; "height": "height"; "cssStyle": "cssStyle"; "initials": "initials"; "icon": "icon"; "imageSrc": "imageSrc"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarComponent, "kendo-avatar", never, { "shape": "shape"; "size": "size"; "rounded": "rounded"; "themeColor": "themeColor"; "fillMode": "fillMode"; "fill": "fill"; "border": "border"; "iconClass": "iconClass"; "width": "width"; "height": "height"; "cssStyle": "cssStyle"; "initials": "initials"; "icon": "icon"; "imageSrc": "imageSrc"; "svgIcon": "svgIcon"; }, {}, never, ["*"]>;
 }

package/avatar.module.d.ts

@@ -5,12 +5,13 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./avatar/avatar.component";
 import * as i2 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Avatar component.
  */
 export declare class AvatarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<AvatarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarModule, [typeof i1.AvatarComponent], [typeof i2.CommonModule], [typeof i1.AvatarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<AvatarModule, [typeof i1.AvatarComponent], [typeof i2.CommonModule, typeof i3.IconsModule], [typeof i1.AvatarComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<AvatarModule>;
 }

package/drawer/item.component.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { TemplateRef, ElementRef, Renderer2, AfterViewInit } from "@angular/core";
+import { SVGIcon } from "@progress/kendo-svg-icons";
 import { DrawerService } from './drawer.service';
 import { DrawerViewItem } from "./models/drawer-view-item.interface";
 import * as i0 from "@angular/core";
@@ -24,9 +25,13 @@ export declare class DrawerItemComponent implements AfterViewInit {
     get disabledClass(): boolean;
     get selectedClass(): boolean;
     get label(): boolean;
+    arrowUpIcon: SVGIcon;
+    arrowDownIcon: SVGIcon;
     constructor(drawerService: DrawerService, element: ElementRef, renderer: Renderer2);
     ngAfterViewInit(): void;
-    get iconClasses(): string[];
+    get iconClasses(): string;
+    get innerCssClasses(): string;
+    get customIconClasses(): string;
     get item(): any;
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<DrawerItemComponent, "[kendoDrawerItem]", never, { "viewItem": "viewItem"; "index": "index"; "itemTemplate": "itemTemplate"; "mini": "mini"; "expanded": "expanded"; "disabled": "disabled"; "cssClass": "cssClass"; "cssStyle": "cssStyle"; }, {}, never, never>;

package/drawer/models/drawer-item.interface.d.ts

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+import { SVGIcon } from "@progress/kendo-svg-icons";
 /**
  * An interface for the Drawer items.
  */
@@ -22,7 +23,11 @@ export interface DrawerItem {
     disabled?: boolean;
     /**
      * Defines the name for an existing icon in a Kendo UI theme.
-     * The icon is rendered inside the Drawer item by a `span.k-icon` element.
+     * The icon is rendered inside the Drawer item by the `kendo-icon` element.
+     *
+     * NOTE: The icon input will no longer require the `k-i-` prefix in the icon name. Please provide only the name of the icon.
+     * To ensure backward compatibility, both syntaxes will be supported for a period of time, but the `k-i-` prefix is deprecated and
+     * you can expect it to be dropped in a future major version of the package.
      */
     icon?: string;
     /**
@@ -31,6 +36,11 @@ export interface DrawerItem {
      * Allows the usage of custom icons.
      */
     iconClass?: string;
+    /**
+     * Defines an SVG icon to be rendered inside the Drawer Item.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    svgIcon?: SVGIcon;
     /**
      * Specifies the id of the Drawer item.
      */

package/drawer.module.d.ts

@@ -13,12 +13,13 @@ import * as i7 from "./drawer/template-directives/header-template.directive";
 import * as i8 from "./drawer/template-directives/footer-template.directive";
 import * as i9 from "./drawer/template-directives/item-template.directive";
 import * as i10 from "@angular/common";
+import * as i11 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the Drawer component.
  */
 export declare class DrawerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DrawerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DrawerModule, [typeof i1.DrawerItemComponent, typeof i2.DrawerListComponent, typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective], [typeof i10.CommonModule], [typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DrawerModule, [typeof i1.DrawerItemComponent, typeof i2.DrawerListComponent, typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective], [typeof i10.CommonModule, typeof i11.IconsModule], [typeof i3.DrawerComponent, typeof i4.DrawerContainerComponent, typeof i5.DrawerContentComponent, typeof i6.DrawerTemplateDirective, typeof i7.DrawerHeaderTemplateDirective, typeof i8.DrawerFooterTemplateDirective, typeof i9.DrawerItemTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DrawerModule>;
 }

package/esm2020/avatar/avatar.component.mjs

@@ -7,7 +7,8 @@ import { validatePackage } from '@progress/kendo-licensing';
 import { getStylingClasses, mapShapeToRounded } from '../common/util';
 import { packageMetadata } from '../package-metadata';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
+import * as i1 from "@progress/kendo-angular-icons";
+import * as i2 from "@angular/common";
 const DEFAULT_ROUNDED = 'full';
 const DEFAULT_SIZE = 'medium';
 const DEFAULT_THEME_COLOR = 'primary';
@@ -157,6 +158,19 @@ export class AvatarComponent {
     get avatarHeight() {
         return this.height;
     }
+    /**
+     * Defines an SVGIcon to be rendered.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     ngOnInit() {
         this.verifyProperties();
     }
@@ -167,17 +181,6 @@ export class AvatarComponent {
         });
         this.handleFillModeAndThemeColorClasses(this.fillMode, this.themeColor);
     }
-    /**
-     * @hidden
-     */
-    iconClasses() {
-        if (this.icon) {
-            return `k-icon k-i-${this.icon}`;
-        }
-        if (this.iconClass) {
-            return `${this.iconClass}`;
-        }
-    }
     /**
      * @hidden
      */
@@ -227,7 +230,7 @@ export class AvatarComponent {
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AvatarComponent, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, ngImport: i0, template: `
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: AvatarComponent, selector: "kendo-avatar", inputs: { shape: "shape", size: "size", rounded: "rounded", themeColor: "themeColor", fillMode: "fillMode", fill: "fill", border: "border", iconClass: "iconClass", width: "width", height: "height", cssStyle: "cssStyle", initials: "initials", icon: "icon", imageSrc: "imageSrc", svgIcon: "svgIcon" }, host: { properties: { "class.k-avatar": "this.hostClass", "class.k-avatar-bordered": "this.borderClass", "style.flexBasis": "this.flexBasis", "style.width": "this.avatarWidth", "style.height": "this.avatarHeight" } }, ngImport: i0, template: `
         <ng-content *ngIf="customAvatar"></ng-content>
 
         <ng-container *ngIf="imageSrc">
@@ -242,10 +245,16 @@ AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
 
         <ng-container *ngIf="icon || iconClass">
             <span class="k-avatar-icon">
-                <span [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+                <kendo-icon-wrapper
+                    [ngStyle]="cssStyle"
+                    [name]="icon"
+                    [customFontClass]="iconClass"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
             </span>
         </ng-container>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
@@ -265,7 +274,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         <ng-container *ngIf="icon || iconClass">
             <span class="k-avatar-icon">
-                <span [ngStyle]="cssStyle" [ngClass]="iconClasses()"></span>
+                <kendo-icon-wrapper
+                    [ngStyle]="cssStyle"
+                    [name]="icon"
+                    [customFontClass]="iconClass"
+                    [svgIcon]="svgIcon"
+                >
+                </kendo-icon-wrapper>
             </span>
         </ng-container>
     `
@@ -313,4 +328,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], imageSrc: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }] } });

package/esm2020/avatar.module.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { AvatarComponent } from './avatar/avatar.component';
 import * as i0 from "@angular/core";
 const exportedModules = [
@@ -19,13 +20,13 @@ const declarations = [
 export class AvatarModule {
 }
 AvatarModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule], exports: [AvatarComponent] });
-AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, imports: [[CommonModule]] });
+AvatarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, declarations: [AvatarComponent], imports: [CommonModule, IconsModule], exports: [AvatarComponent] });
+AvatarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AvatarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedModules],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });

package/esm2020/drawer/drawer.component.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, ContentChild, ElementRef, EventEmitter, HostBinding, Input, Output, isDevMode } from '@angular/core';
 import { validatePackage } from '@progress/kendo-licensing';
 import { packageMetadata } from '../package-metadata';

package/esm2020/drawer/item.component.mjs

@@ -2,12 +2,15 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { Component, Input, TemplateRef, HostBinding, ElementRef, Renderer2 } from "@angular/core";
+import { chevronDownIcon, chevronUpIcon } from "@progress/kendo-svg-icons";
 import { DrawerService } from './drawer.service';
 import { nestedLink, DRAWER_LINK_SELECTOR } from './util';
 import * as i0 from "@angular/core";
 import * as i1 from "./drawer.service";
-import * as i2 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-icons";
+import * as i3 from "@angular/common";
 /**
  * @hidden
  */
@@ -16,6 +19,8 @@ export class DrawerItemComponent {
         this.drawerService = drawerService;
         this.element = element;
         this.renderer = renderer;
+        this.arrowUpIcon = chevronUpIcon;
+        this.arrowDownIcon = chevronDownIcon;
     }
     get disabledClass() {
         return this.item.disabled;
@@ -34,14 +39,20 @@ export class DrawerItemComponent {
         }
     }
     get iconClasses() {
-        const classes = [];
         if (this.item.icon) {
-            classes.push(`k-icon ${this.item.icon}`);
+            const stripIcon = this.item.icon.replace('k-i-', '');
+            return `${stripIcon}`;
         }
-        if (this.item.iconClass) {
-            classes.push(`${this.item.iconClass}`);
+    }
+    get innerCssClasses() {
+        if (this.item.iconClass && this.item.icon) {
+            return `${this.item.iconClass}`;
+        }
+    }
+    get customIconClasses() {
+        if (!this.item.icon && this.item.iconClass) {
+            return this.item.iconClass;
         }
-        return classes;
     }
     get item() {
         return this.viewItem.item;
@@ -61,19 +72,34 @@ DrawerItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
 
         <ng-template #defaultTemplate>
             <ng-container *ngIf="expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
+
                 <span class="k-item-text">{{ item.text }}</span>
-                <span *ngIf="viewItem.hasChildren"
-                      class="k-icon k-drawer-toggle"
-                      [class.k-i-chevron-up]="viewItem.isExpanded"
-                      [class.k-i-chevron-down]="!viewItem.isExpanded"
-                ></span>
+                <kendo-icon-wrapper
+                    *ngIf="viewItem.hasChildren"
+                    [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
+                    innerCssClass="k-drawer-toggle"
+                    [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerItemComponent, decorators: [{
             type: Component,
             args: [{
@@ -92,16 +118,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 
         <ng-template #defaultTemplate>
             <ng-container *ngIf="expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
+
                 <span class="k-item-text">{{ item.text }}</span>
-                <span *ngIf="viewItem.hasChildren"
-                      class="k-icon k-drawer-toggle"
-                      [class.k-i-chevron-up]="viewItem.isExpanded"
-                      [class.k-i-chevron-down]="!viewItem.isExpanded"
-                ></span>
+                <kendo-icon-wrapper
+                    *ngIf="viewItem.hasChildren"
+                    [name]="viewItem.isExpanded ? 'arrow-chevron-up' : 'arrow-chevron-down'"
+                    innerCssClass="k-drawer-toggle"
+                    [svgIcon]="viewItem.isExpanded ? arrowUpIcon : arrowDownIcon"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
             <ng-container *ngIf="mini && !expanded">
-                <span [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="iconClasses"
+                    [customFontClass]="customIconClasses"
+                    [svgIcon]="item.svgIcon"
+                    [innerCssClass]="innerCssClasses"
+                >
+                </kendo-icon-wrapper>
             </ng-container>
         </ng-template>
     `

package/esm2020/drawer.module.mjs

@@ -9,6 +9,7 @@ import { DrawerComponent } from './drawer/drawer.component';
 import { DrawerContentComponent } from './drawer/drawer-content.component';
 import { DrawerItemComponent } from './drawer/item.component';
 import { DrawerListComponent } from './drawer/list.component';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { DrawerTemplateDirective, DrawerItemTemplateDirective, DrawerHeaderTemplateDirective, DrawerFooterTemplateDirective } from './drawer/template-directives';
 import * as i0 from "@angular/core";
 const templateDirectives = [
@@ -41,18 +42,18 @@ DrawerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DrawerContentComponent, DrawerTemplateDirective,
         DrawerHeaderTemplateDirective,
         DrawerFooterTemplateDirective,
-        DrawerItemTemplateDirective], imports: [CommonModule], exports: [DrawerComponent,
+        DrawerItemTemplateDirective], imports: [CommonModule, IconsModule], exports: [DrawerComponent,
         DrawerContainerComponent,
         DrawerContentComponent, DrawerTemplateDirective,
         DrawerHeaderTemplateDirective,
         DrawerFooterTemplateDirective,
         DrawerItemTemplateDirective] });
-DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerModule, imports: [[CommonModule]] });
+DrawerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerModule, imports: [[CommonModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DrawerModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedModules],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });

package/esm2020/expansionpanel/expansionpanel.component.mjs

@@ -4,7 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { AnimationBuilder } from '@angular/animations';
 import { isFocusable, hasClass } from './../common/dom-queries';
-import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, ElementRef, Renderer2, NgZone, ViewChild } from '@angular/core';
+import { Component, ContentChild, EventEmitter, HostBinding, Input, Output, ElementRef, Renderer2, NgZone, ViewChild, isDevMode } from '@angular/core';
 import { ExpansionPanelTitleDirective } from './expansionpanel-title.directive';
 import { collapse, expand } from './animations';
 import { isPresent } from '../common/util';
@@ -18,7 +18,8 @@ import { take } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@angular/animations";
-import * as i3 from "@angular/common";
+import * as i3 from "@progress/kendo-angular-icons";
+import * as i4 from "@angular/common";
 const DEFAULT_DURATION = 200;
 const CONTENT_HIDDEN_CLASS = 'k-hidden';
 /**
@@ -125,6 +126,32 @@ export class ExpansionPanelComponent {
     get expanded() {
         return this._expanded;
     }
+    /**
+     * Defines an SVGIcon for the expanded state of the component.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgExpandIcon(icon) {
+        if (isDevMode() && icon && this.expandIcon) {
+            throw new Error('Setting both expandIcon/svgExpandIcon options at the same time is not supported.');
+        }
+        this._svgExpandIcon = icon;
+    }
+    get svgExpandIcon() {
+        return this._svgExpandIcon;
+    }
+    /**
+     * Defines an SVGIcon for the collapsed state of the component.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgCollapseIcon(icon) {
+        if (isDevMode() && icon && this.collapseIcon) {
+            throw new Error('Setting both collapseIcon/svgCollapseIcon options at the same time is not supported.');
+        }
+        this._svgCollapseIcon = icon;
+    }
+    get svgCollapseIcon() {
+        return this._svgCollapseIcon;
+    }
     get expandedClass() {
         return this.expanded && !this.disabled;
     }
@@ -208,12 +235,34 @@ export class ExpansionPanelComponent {
     /**
      * @hidden
      */
-    get indicatorClasses() {
+    get expanderIndicatorClasses() {
+        if (this.expanded) {
+            return !this.collapseIcon ? `caret-alt-up` : '';
+        }
+        else {
+            return !this.expandIcon ? `caret-alt-down` : '';
+        }
+    }
+    /**
+     * @hidden
+     */
+    get customExpanderIndicatorClasses() {
+        if (this.expanded) {
+            return this.collapseIcon ? this.collapseIcon : '';
+        }
+        else {
+            return this.expandIcon ? this.expandIcon : '';
+        }
+    }
+    /**
+     * @hidden
+     */
+    get svgExpanderIndicatorClasses() {
         if (this.expanded) {
-            return this.collapseIcon ? this.collapseIcon : `k-icon k-i-chevron-up`;
+            return this.svgCollapseIcon ? this.svgCollapseIcon : undefined;
         }
         else {
-            return this.expandIcon ? this.expandIcon : `k-icon k-i-chevron-down`;
+            return this.svgExpandIcon ? this.svgExpandIcon : undefined;
         }
     }
     /**
@@ -293,7 +342,7 @@ export class ExpansionPanelComponent {
     }
 }
 ExpansionPanelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.LocalizationService }, { token: i2.AnimationBuilder }], target: i0.ɵɵFactoryTarget.Component });
-ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
+ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExpansionPanelComponent, selector: "kendo-expansionpanel", inputs: { title: "title", subtitle: "subtitle", disabled: "disabled", expanded: "expanded", svgExpandIcon: "svgExpandIcon", svgCollapseIcon: "svgCollapseIcon", expandIcon: "expandIcon", collapseIcon: "collapseIcon", animation: "animation" }, outputs: { expandedChange: "expandedChange", action: "action", expand: "expand", collapse: "collapse" }, host: { properties: { "class.k-expander": "this.hostClass", "class.k-expanded": "this.expandedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -323,7 +372,12 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 [ngTemplateOutlet]="titleTemplate?.templateRef">
             </ng-template>
             <span class="k-expander-indicator">
-                <span [ngClass]="indicatorClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="expanderIndicatorClasses"
+                    [customFontClass]="customExpanderIndicatorClasses"
+                    [svgIcon]="svgExpanderIndicatorClasses"
+                >
+                </kendo-icon-wrapper>
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
@@ -331,7 +385,7 @@ ExpansionPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 <ng-content></ng-content>
             </div>
         </div>
-    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i3.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelComponent, decorators: [{
             type: Component,
             args: [{
@@ -368,7 +422,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [ngTemplateOutlet]="titleTemplate?.templateRef">
             </ng-template>
             <span class="k-expander-indicator">
-                <span [ngClass]="indicatorClasses"></span>
+                <kendo-icon-wrapper
+                    [name]="expanderIndicatorClasses"
+                    [customFontClass]="customExpanderIndicatorClasses"
+                    [svgIcon]="svgExpanderIndicatorClasses"
+                >
+                </kendo-icon-wrapper>
             </span>
         </div>
         <div #content class="k-expander-content-wrapper">
@@ -386,6 +445,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], expanded: [{
                 type: Input
+            }], svgExpandIcon: [{
+                type: Input
+            }], svgCollapseIcon: [{
+                type: Input
             }], expandIcon: [{
                 type: Input
             }], collapseIcon: [{

package/esm2020/expansionpanel.module.mjs

@@ -5,6 +5,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { EventsModule } from '@progress/kendo-angular-common';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import { ExpansionPanelTitleDirective } from './expansionpanel/expansionpanel-title.directive';
 import { ExpansionPanelComponent } from './expansionpanel/expansionpanel.component';
 import * as i0 from "@angular/core";
@@ -23,14 +24,14 @@ export class ExpansionPanelModule {
 }
 ExpansionPanelModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 ExpansionPanelModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, declarations: [ExpansionPanelComponent,
-        ExpansionPanelTitleDirective], imports: [CommonModule, EventsModule], exports: [ExpansionPanelComponent,
+        ExpansionPanelTitleDirective], imports: [CommonModule, EventsModule, IconsModule], exports: [ExpansionPanelComponent,
         ExpansionPanelTitleDirective] });
-ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, imports: [[CommonModule, EventsModule]] });
+ExpansionPanelModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, imports: [[CommonModule, EventsModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExpansionPanelModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedModules],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, IconsModule]
                 }]
         }] });

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-layout',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673519145,
+    publishDate: 1673525048,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
 };