@progress/kendo-angular-treelist 11.0.0-develop.107 → 11.0.0-develop.108

package/column-menu/column-chooser.component.d.ts

@@ -6,6 +6,8 @@ import { NgZone, Renderer2, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { PopupService } from '@progress/kendo-angular-popup';
 import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SVGIcon } from '@progress/kendo-svg-icons';
+import { Button } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 /**
  * Represents the component for selecting columns in the TreeList. To enable the user to show or hide columns,
@@ -34,6 +36,7 @@ export declare class ColumnChooserComponent implements OnDestroy {
      */
     allowHideAll: boolean;
     get columns(): any[];
+    columnsIcon: SVGIcon;
     private popupRef;
     private closeClick;
     constructor(localization: LocalizationService, columnInfoService: ColumnInfoService, popupService: PopupService, ngZone: NgZone, renderer: Renderer2, changeDetector: ChangeDetectorRef);
@@ -41,7 +44,7 @@ export declare class ColumnChooserComponent implements OnDestroy {
     /**
      * @hidden
      */
-    toggle(anchor: any, template: any): void;
+    toggle(anchor: Button, template: any): void;
     /**
      * @hidden
      */

package/column-menu/column-menu-chooser.component.d.ts

@@ -6,6 +6,7 @@ import { EventEmitter, ChangeDetectorRef } from '@angular/core';
 import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the component for selecting columns in the TreeList that can be placed
@@ -42,6 +43,7 @@ export declare class ColumnMenuChooserComponent extends ColumnMenuItemBase {
      */
     actionsClass: string;
     get columns(): any;
+    columnsIcon: SVGIcon;
     constructor(localization: LocalizationService, columnInfoService: ColumnInfoService, changeDetector: ChangeDetectorRef);
     /**
      * @hidden

package/column-menu/column-menu-filter.component.d.ts

@@ -5,6 +5,7 @@
 import { EventEmitter } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the component for editing column filters in the TreeList that can be placed
@@ -38,6 +39,7 @@ export declare class ColumnMenuFilterComponent extends ColumnMenuItemBase {
      * @hidden
      */
     actionsClass: string;
+    filterIcon: SVGIcon;
     constructor(localization: LocalizationService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuFilterComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuFilterComponent, "kendo-treelist-columnmenu-filter", never, { "expanded": "expanded"; }, { "expand": "expand"; "collapse": "collapse"; }, never, never>;

package/column-menu/column-menu-item.component.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, OnChanges } from '@angular/core';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents an item that can be placed inside a
@@ -34,6 +35,11 @@ export declare class ColumnMenuItemComponent implements OnChanges {
      * that will be rendered for the item.
      */
     icon: string;
+    /**
+     * Specifies the name of the [SVG icon]({% slug svgicon_list %})
+     * that will be rendered for the item.
+     */
+    svgIcon: SVGIcon;
     /**
      * Specifies the item text.
      */
@@ -51,7 +57,6 @@ export declare class ColumnMenuItemComponent implements OnChanges {
      */
     expanded: boolean;
     contentTemplate: ColumnMenuItemContentTemplateDirective;
-    get iconClass(): string;
     contentState: string;
     ngOnChanges(changes: any): void;
     /**
@@ -60,5 +65,5 @@ export declare class ColumnMenuItemComponent implements OnChanges {
     onClick(e: any): void;
     private updateContentState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuItemComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-treelist-columnmenu-item", never, { "icon": "icon"; "text": "text"; "selected": "selected"; "disabled": "disabled"; "expanded": "expanded"; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ColumnMenuItemComponent, "kendo-treelist-columnmenu-item", never, { "icon": "icon"; "svgIcon": "svgIcon"; "text": "text"; "selected": "selected"; "disabled": "disabled"; "expanded": "expanded"; }, { "itemClick": "itemClick"; "expand": "expand"; "collapse": "collapse"; }, ["contentTemplate"], never>;
 }

package/column-menu/column-menu-lock.component.d.ts

@@ -6,6 +6,7 @@ import { ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents a column-menu item that can be placed inside a
@@ -26,9 +27,12 @@ export declare class ColumnMenuLockComponent extends ColumnMenuItemBase {
     private localization;
     private columnInfoService;
     private changeDetector;
+    unlockIcon: SVGIcon;
+    lockIcon: SVGIcon;
     constructor(localization: LocalizationService, columnInfoService: ColumnInfoService, changeDetector: ChangeDetectorRef);
     get text(): string;
     get icon(): string;
+    get svgIcon(): SVGIcon;
     get disabled(): boolean;
     /**
      * @hidden

package/column-menu/column-menu-sort.component.d.ts

@@ -5,6 +5,7 @@
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SortService } from '../common/sort.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents a column-menu item for sorting TreeList columns that can be placed inside a
@@ -24,6 +25,8 @@ import * as i0 from "@angular/core";
 export declare class ColumnMenuSortComponent extends ColumnMenuItemBase {
     localization: LocalizationService;
     protected sortService: SortService;
+    sortAscSmallIcon: SVGIcon;
+    sortDescSmallIcon: SVGIcon;
     constructor(localization: LocalizationService, sortService: SortService);
     get sortedAsc(): boolean;
     get sortedDesc(): boolean;

package/column-menu/column-menu.component.d.ts

@@ -7,6 +7,7 @@ import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnMenuSettings } from './column-menu-settings.interface';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [column menu]({% slug columnmenu_treelist %}) component.
@@ -53,6 +54,7 @@ export declare class ColumnMenuComponent implements OnChanges, OnDestroy {
      * @hidden
      */
     expandedColumns: boolean;
+    moreVerticalIcon: SVGIcon;
     private popupRef;
     private closeSubscription;
     constructor(popupService: SinglePopupService, localization: LocalizationService, service: ColumnMenuService);

package/column-menu/column-menu.module.d.ts

@@ -15,12 +15,13 @@ import * as i9 from "./column-menu-lock.component";
 import * as i10 from "./column-menu-template.directive";
 import * as i11 from "@angular/common";
 import * as i12 from "../filtering/menu/filter-menu.module";
+import * as i13 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  */
 export declare class ColumnMenuModule {
     static exports(): any[];
     static ɵfac: i0.ɵɵFactoryDeclaration<ColumnMenuModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ColumnMenuModule, [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective], [typeof i11.CommonModule, typeof i12.FilterMenuModule], [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ColumnMenuModule, [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective], [typeof i11.CommonModule, typeof i12.FilterMenuModule, typeof i13.ButtonModule], [typeof i1.ColumnListComponent, typeof i2.ColumnChooserComponent, typeof i3.ColumnMenuChooserComponent, typeof i4.ColumnMenuFilterComponent, typeof i5.ColumnMenuItemComponent, typeof i6.ColumnMenuItemContentTemplateDirective, typeof i7.ColumnMenuSortComponent, typeof i8.ColumnMenuComponent, typeof i9.ColumnMenuLockComponent, typeof i10.ColumnMenuTemplateDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ColumnMenuModule>;
 }

package/esm2020/column-menu/column-chooser.component.mjs

@@ -8,11 +8,13 @@ import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { closest } from '../rendering/common/dom-queries';
 import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { columnsIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
 import * as i3 from "@progress/kendo-angular-popup";
-import * as i4 from "./column-list.component";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "./column-list.component";
 /**
  * Represents the component for selecting columns in the TreeList. To enable the user to show or hide columns,
  * add the component inside a [`ToolbarTemplate`]({% slug api_treelist_toolbartemplatedirective %}) directive.
@@ -40,6 +42,7 @@ export class ColumnChooserComponent {
          * Specifies if all columns can be hidden.
          */
         this.allowHideAll = true;
+        this.columnsIcon = columnsIcon;
     }
     get columns() {
         return this.columnInfoService.leafNamedColumns;
@@ -54,7 +57,7 @@ export class ColumnChooserComponent {
         if (!this.popupRef) {
             const direction = this.localization.rtl ? 'right' : 'left';
             this.popupRef = this.popupService.open({
-                anchor: anchor,
+                anchor: anchor.element,
                 content: template,
                 positionMode: 'absolute',
                 anchorAlign: { vertical: 'bottom', horizontal: direction },
@@ -65,7 +68,7 @@ export class ColumnChooserComponent {
                 return;
             }
             this.ngZone.runOutsideAngular(() => this.closeClick = this.renderer.listen('document', 'click', ({ target }) => {
-                if (!closest(target, node => node === this.popupRef.popupElement || node === anchor)) {
+                if (!closest(target, node => node === this.popupRef.popupElement || node === anchor.element)) {
                     this.close();
                 }
             }));
@@ -108,12 +111,13 @@ export class ColumnChooserComponent {
 ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i3.PopupService }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnChooserComponent, selector: "kendo-treelist-column-chooser", inputs: { autoSync: "autoSync", allowHideAll: "allowHideAll" }, ngImport: i0, template: `
         <button #anchor
+            kendoButton
             type="button"
             (click)="toggle(anchor, template)"
-            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
-            [attr.title]="localization.get('columns')">
-            <span class="k-button-icon k-icon k-i-columns"></span>
-        </button>
+            fillMode="flat"
+            [attr.title]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
             <kendo-treelist-columnlist
@@ -126,19 +130,20 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (columnChange)="onChange($event)">
             </kendo-treelist-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i5.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-column-chooser',
                     template: `
         <button #anchor
+            kendoButton
             type="button"
             (click)="toggle(anchor, template)"
-            class="k-button k-button-flat-base k-button-flat k-icon-button k-button-md k-rounded-md k-button-rectangle k-icon-button"
-            [attr.title]="localization.get('columns')">
-            <span class="k-button-icon k-icon k-i-columns"></span>
-        </button>
+            fillMode="flat"
+            [attr.title]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"></button>
         <ng-template #template>
             <span class='k-column-chooser-title'>{{ localization.get('columns') }}</span>
             <kendo-treelist-columnlist

package/esm2020/column-menu/column-menu-chooser.component.mjs

@@ -6,6 +6,7 @@ import { Component, Input, Output, EventEmitter, ChangeDetectorRef } from '@angu
 import { ColumnInfoService } from '../common/column-info.service';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { columnsIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
@@ -48,6 +49,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.columnsIcon = columnsIcon;
     }
     get columns() {
         return this.columnInfoService.leafNamedColumns;
@@ -65,8 +67,13 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
 }
 ColumnMenuChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuChooserComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuChooserComponent, selector: "kendo-treelist-columnmenu-chooser", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('columns')"
-            icon="columns" [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item 
+            [text]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                 <kendo-treelist-columnlist
                     [applyText]="localization.get('columnsApply')"
@@ -79,14 +86,19 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-treelist-columnlist>
             </ng-template>
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-treelist-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-chooser',
                     template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('columns')"
-            icon="columns" [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item 
+            [text]="localization.get('columns')"
+            icon="columns"
+            [svgIcon]="columnsIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                 <kendo-treelist-columnlist
                     [applyText]="localization.get('columnsApply')"

package/esm2020/column-menu/column-menu-filter.component.mjs

@@ -5,6 +5,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { filterIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./column-menu-item.component";
@@ -44,12 +45,18 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.filterIcon = filterIcon;
     }
 }
 ColumnMenuFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuFilterComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuFilterComponent, selector: "kendo-treelist-columnmenu-filter", inputs: { expanded: "expanded" }, outputs: { expand: "expand", collapse: "collapse" }, usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('filter')" icon="filter"
-            [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('filter')"
+            icon="filter"
+            [svgIcon]="filterIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                     <kendo-treelist-filter-menu-container
                         [column]="service.column"
@@ -59,14 +66,19 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                     </kendo-treelist-filter-menu-container>
                 </ng-template>
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-treelist-filter-menu-container", inputs: ["column", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoTreeListColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-filter',
                     template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('filter')" icon="filter"
-            [expanded]="expanded" (collapse)="collapse.emit()" (expand)="expand.emit()">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('filter')"
+            icon="filter"
+            [svgIcon]="filterIcon"
+            [expanded]="expanded"
+            (collapse)="collapse.emit()"
+            (expand)="expand.emit()">
             <ng-template kendoTreeListColumnMenuItemContentTemplate>
                     <kendo-treelist-filter-menu-container
                         [column]="service.column"

package/esm2020/column-menu/column-menu-item.component.mjs

@@ -6,7 +6,8 @@ import { Component, Input, Output, EventEmitter, ContentChild } from '@angular/c
 import { trigger, transition, style, animate, state } from '@angular/animations';
 import { ColumnMenuItemContentTemplateDirective } from './column-menu-item-content-template.directive';
 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";
 /**
  * Represents an item that can be placed inside a
  * [`ColumnMenuTemplate`]({% slug api_treelist_columnmenutemplatedirective %}) directive.
@@ -34,9 +35,6 @@ export class ColumnMenuItemComponent {
         this.collapse = new EventEmitter();
         this.contentState = 'collapsed';
     }
-    get iconClass() {
-        return `k-i-${this.icon}`;
-    }
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -63,17 +61,18 @@ export class ColumnMenuItemComponent {
     }
 }
 ColumnMenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
+ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: { icon: "icon", svgIcon: "svgIcon", text: "text", selected: "selected", disabled: "disabled", expanded: "expanded" }, outputs: { itemClick: "itemClick", expand: "expand", collapse: "collapse" }, queries: [{ propertyName: "contentTemplate", first: true, predicate: ColumnMenuItemContentTemplateDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: `
         <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-selected]="selected" [class.k-disabled]="disabled">
-           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
-           </span>
-           {{ text }}
+            <kendo-icon-wrapper
+                [name]="icon"
+                [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
         </div>
         <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
             </ng-container>
         <div>
-    `, isInline: true, directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),
@@ -125,9 +124,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: 'kendo-treelist-columnmenu-item',
                     template: `
         <div class="k-columnmenu-item" (click)="onClick($event)" [class.k-selected]="selected" [class.k-disabled]="disabled">
-           <span *ngIf="icon" class="k-icon" [ngClass]="iconClass">
-           </span>
-           {{ text }}
+            <kendo-icon-wrapper
+                [name]="icon"
+                [svgIcon]="svgIcon"></kendo-icon-wrapper>
+            {{ text }}
         </div>
         <div *ngIf="contentTemplate" [@state]="contentState" [style.overflow]="'hidden'" class="k-columnmenu-item-content">
             <ng-container [ngTemplateOutlet]="contentTemplate.templateRef">
@@ -143,6 +143,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -153,5 +155,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], contentTemplate: [{
                 type: ContentChild,
-                args: [ColumnMenuItemContentTemplateDirective, { static: false }]
+                args: [ColumnMenuItemContentTemplateDirective]
             }] } });

package/esm2020/column-menu/column-menu-lock.component.mjs

@@ -6,6 +6,7 @@ import { Component, ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { lockIcon, unlockIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/column-info.service";
@@ -31,6 +32,8 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
         this.localization = localization;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
+        this.unlockIcon = unlockIcon;
+        this.lockIcon = lockIcon;
     }
     get text() {
         return this.localization.get(this.locked ? 'unlock' : 'lock');
@@ -38,6 +41,9 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
     get icon() {
         return this.locked ? 'unlock' : 'lock';
     }
+    get svgIcon() {
+        return this.locked ? this.unlockIcon : this.lockIcon;
+    }
     get disabled() {
         return !this.locked && this.columnInfoService.unlockedRootCount < 2;
     }
@@ -72,15 +78,25 @@ export class ColumnMenuLockComponent extends ColumnMenuItemBase {
 }
 ColumnMenuLockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuLockComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuLockComponent, selector: "kendo-treelist-columnmenu-lock", usesInheritance: true, ngImport: i0, template: `
-       <kendo-treelist-columnmenu-item [text]="text" [icon]="icon" (itemClick)="toggleColumn()" [disabled]="disabled">
+       <kendo-treelist-columnmenu-item
+           [text]="text"
+           [icon]="icon"
+           [svgIcon]="svgIcon"
+           (itemClick)="toggleColumn()"
+           [disabled]="disabled">
        </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuLockComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-lock',
                     template: `
-       <kendo-treelist-columnmenu-item [text]="text" [icon]="icon" (itemClick)="toggleColumn()" [disabled]="disabled">
+       <kendo-treelist-columnmenu-item
+           [text]="text"
+           [icon]="icon"
+           [svgIcon]="svgIcon"
+           (itemClick)="toggleColumn()"
+           [disabled]="disabled">
        </kendo-treelist-columnmenu-item>
     `
                 }]

package/esm2020/column-menu/column-menu-sort.component.mjs

@@ -7,6 +7,7 @@ import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { SortService } from '../common/sort.service';
 import { normalize } from '../columns/sort-settings';
 import { ColumnMenuItemBase } from './column-menu-item-base';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../common/sort.service";
@@ -31,6 +32,8 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
         super();
         this.localization = localization;
         this.sortService = sortService;
+        this.sortAscSmallIcon = sortAscSmallIcon;
+        this.sortDescSmallIcon = sortDescSmallIcon;
     }
     get sortedAsc() {
         const descriptor = this.descriptor;
@@ -65,23 +68,39 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
 }
 ColumnMenuSortComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuSortComponent, deps: [{ token: i1.LocalizationService }, { token: i2.SortService }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuSortComponent, selector: "kendo-treelist-columnmenu-sort", usesInheritance: true, ngImport: i0, template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortAscending')"
-            icon="sort-asc-small" (itemClick)="toggleSort('asc')" [selected]="sortedAsc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortAscending')"
+            icon="sort-asc-small"
+            [svgIcon]="sortAscSmallIcon"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
         </kendo-treelist-columnmenu-item>
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortDescending')"
-            icon="sort-desc-small" (itemClick)="toggleSort('desc')" [selected]="sortedDesc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortDescending')"
+            icon="sort-desc-small"
+            [svgIcon]="sortDescSmallIcon"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
         </kendo-treelist-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-treelist-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuSortComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-treelist-columnmenu-sort',
                     template: `
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortAscending')"
-            icon="sort-asc-small" (itemClick)="toggleSort('asc')" [selected]="sortedAsc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortAscending')"
+            icon="sort-asc-small"
+            [svgIcon]="sortAscSmallIcon"
+            (itemClick)="toggleSort('asc')"
+            [selected]="sortedAsc">
         </kendo-treelist-columnmenu-item>
-        <kendo-treelist-columnmenu-item [text]="localization.get('sortDescending')"
-            icon="sort-desc-small" (itemClick)="toggleSort('desc')" [selected]="sortedDesc">
+        <kendo-treelist-columnmenu-item
+            [text]="localization.get('sortDescending')"
+            icon="sort-desc-small"
+            [svgIcon]="sortDescSmallIcon"
+            (itemClick)="toggleSort('desc')"
+            [selected]="sortedDesc">
         </kendo-treelist-columnmenu-item>
     `
                 }]