@progress/kendo-angular-grid 11.0.0-develop.101 → 11.0.0-develop.102

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 Grid. To enable the user to show or hide columns,
@@ -27,7 +29,7 @@ import * as i0 from "@angular/core";
  * })
  *
  * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ *     public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
  * }
  * ```
  */
@@ -38,6 +40,10 @@ export declare class ColumnChooserComponent implements OnDestroy {
     private ngZone;
     private renderer;
     private changeDetector;
+    /**
+     * @hidden
+     */
+    columnsIcon: SVGIcon;
     /**
      * Specifies if the changes in the visibility of the column will be immediately applied.
      */
@@ -54,7 +60,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-autosize-all.component.d.ts

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { OnInit } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
@@ -43,6 +44,7 @@ import * as i0 from "@angular/core";
 export declare class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase implements OnInit {
     localization: LocalizationService;
     ctx: ContextService;
+    displayInlineBlockIcon: SVGIcon;
     constructor(localization: LocalizationService, ctx: ContextService);
     ngOnInit(): void;
     autoSizeAllColumns(): void;

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { OnInit } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
@@ -47,6 +48,7 @@ export declare class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBas
      * The Grid column instance which will be resized through the auto size column option.
      */
     column: any;
+    maxWidthIcon: SVGIcon;
     constructor(localization: LocalizationService, ctx: ContextService);
     ngOnInit(): void;
     autoSizeColumn(): void;

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

@@ -6,6 +6,7 @@ import { EventEmitter, ChangeDetectorRef, ElementRef } 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 Grid that can be placed
@@ -63,6 +64,7 @@ export declare class ColumnMenuChooserComponent extends ColumnMenuItemBase {
      */
     actionsClass: string;
     get columns(): any;
+    columnsIcon: SVGIcon;
     constructor(localization: LocalizationService, columnInfoService: ColumnInfoService, changeDetector: ChangeDetectorRef, hostElement: ElementRef);
     /**
      * @hidden

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, ElementRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
@@ -59,6 +60,7 @@ export declare class ColumnMenuFilterComponent extends ColumnMenuItemBase {
      * @hidden
      */
     actionsClass: string;
+    filterIcon: SVGIcon;
     constructor(localization: LocalizationService, hostElement: ElementRef);
     /**
      * @hidden

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
@@ -51,6 +52,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.
      */
@@ -68,7 +74,6 @@ export declare class ColumnMenuItemComponent implements OnChanges {
      */
     expanded: boolean;
     contentTemplate: ColumnMenuItemContentTemplateDirective;
-    get iconClass(): string;
     contentState: string;
     ngOnChanges(changes: any): void;
     /**
@@ -77,5 +82,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-grid-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-grid-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

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

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter, ElementRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 /**
@@ -71,6 +72,7 @@ export declare class ColumnMenuPositionComponent extends ColumnMenuItemBase {
      * @hidden
      */
     get isLast(): boolean;
+    setColumnPositionIcon: SVGIcon;
     private _isLast;
     constructor(localization: LocalizationService, hostElement: ElementRef);
     /**

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

@@ -6,6 +6,7 @@ import { Renderer2 } from '@angular/core';
 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 Grid columns that can be placed inside a
@@ -42,6 +43,8 @@ export declare class ColumnMenuSortComponent extends ColumnMenuItemBase {
     localization: LocalizationService;
     protected sortService: SortService;
     protected renderer: Renderer2;
+    sortAscSmallIcon: SVGIcon;
+    sortDescSmallIcon: SVGIcon;
     constructor(localization: LocalizationService, sortService: SortService, renderer: Renderer2);
     get sortedAsc(): boolean;
     get sortedDesc(): boolean;

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { ColumnInfoService } from '../common/column-info.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
@@ -42,9 +43,12 @@ export declare class ColumnMenuStickComponent extends ColumnMenuItemBase {
     private localization;
     private columnInfoService;
     private changeDetector;
+    stickIcon: SVGIcon;
+    unstickIcon: 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.component.d.ts

@@ -9,6 +9,7 @@ import { SinglePopupService } from '../common/single-popup.service';
 import { ColumnMenuService } from './column-menu.service';
 import { ColumnMenuSettings } from './column-menu-settings.interface';
 import { ContextService } from '../common/provider.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [column menu]({% slug columnmenu_grid %}) component.
@@ -67,6 +68,7 @@ export declare class ColumnMenuComponent implements AfterViewInit, OnChanges, On
      * @hidden
      */
     expandedPosition: boolean;
+    moreVerticalIcon: SVGIcon;
     private popupRef;
     private closeSubscription;
     constructor(navigationService: NavigationService, popupService: SinglePopupService, localization: LocalizationService, service: ColumnMenuService, ctx: ContextService);

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

@@ -21,12 +21,13 @@ import * as i15 from "./column-menu-autosize.component";
 import * as i16 from "./column-menu-autosize-all.component";
 import * as i17 from "@angular/common";
 import * as i18 from "../filtering/menu/filter-menu.module";
+import * as i19 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.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent, typeof i15.ColumnMenuAutoSizeColumnComponent, typeof i16.ColumnMenuAutoSizeAllColumnsComponent], [typeof i17.CommonModule, typeof i18.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, typeof i11.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent, typeof i15.ColumnMenuAutoSizeColumnComponent, typeof i16.ColumnMenuAutoSizeAllColumnsComponent]>;
+    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.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent, typeof i15.ColumnMenuAutoSizeColumnComponent, typeof i16.ColumnMenuAutoSizeAllColumnsComponent], [typeof i17.CommonModule, typeof i18.FilterMenuModule, typeof i19.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, typeof i11.ColumnMenuContainerComponent, typeof i12.ColumnMenuItemDirective, typeof i13.ColumnMenuStickComponent, typeof i14.ColumnMenuPositionComponent, typeof i15.ColumnMenuAutoSizeColumnComponent, typeof i16.ColumnMenuAutoSizeAllColumnsComponent]>;
     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 Grid. To enable the user to show or hide columns,
  * add the component inside a [ToolbarTemplate]({% slug api_grid_toolbartemplatedirective %}) directive.
@@ -33,7 +35,7 @@ import * as i4 from "./column-list.component";
  * })
  *
  * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ *     public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
  * }
  * ```
  */
@@ -45,6 +47,10 @@ export class ColumnChooserComponent {
         this.ngZone = ngZone;
         this.renderer = renderer;
         this.changeDetector = changeDetector;
+        /**
+         * @hidden
+         */
+        this.columnsIcon = columnsIcon;
         /**
          * Specifies if the changes in the visibility of the column will be immediately applied.
          */
@@ -67,7 +73,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 },
@@ -78,7 +84,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();
                 }
             }));
@@ -121,12 +127,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-grid-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-grid-columnlist
@@ -139,19 +146,20 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (columnChange)="onChange($event)">
             </kendo-grid-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], 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-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnChooserComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-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-grid-columnlist

package/esm2020/column-menu/column-menu-autosize-all.component.mjs

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, isDevMode } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { displayInlineBlockIcon } from '@progress/kendo-svg-icons';
 import { ColunnMenuErrorMessages } from '../common/error-messages';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
@@ -51,6 +52,7 @@ export class ColumnMenuAutoSizeAllColumnsComponent extends ColumnMenuItemBase {
         super();
         this.localization = localization;
         this.ctx = ctx;
+        this.displayInlineBlockIcon = displayInlineBlockIcon;
     }
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
@@ -68,10 +70,10 @@ ColumnMenuAutoSizeAllColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVer
             *ngIf="!this.ctx.grid.virtualColumns"
             [text]="localization.get('autosizeAllColumns')"
             icon="display-inline-block"
+            [svgIcon]="displayInlineBlockIcon"
             (itemClick)="autoSizeAllColumns()"
-        >
-        </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ></kendo-grid-columnmenu-item>
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuAutoSizeAllColumnsComponent, decorators: [{
             type: Component,
             args: [{
@@ -81,9 +83,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             *ngIf="!this.ctx.grid.virtualColumns"
             [text]="localization.get('autosizeAllColumns')"
             icon="display-inline-block"
+            [svgIcon]="displayInlineBlockIcon"
             (itemClick)="autoSizeAllColumns()"
-        >
-        </kendo-grid-columnmenu-item>
+        ></kendo-grid-columnmenu-item>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ContextService }]; } });

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, isDevMode } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { maxWidthIcon } from '@progress/kendo-svg-icons';
 import { ColunnMenuErrorMessages } from '../common/error-messages';
 import { ContextService } from '../common/provider.service';
 import { ColumnMenuItemBase } from './column-menu-item-base';
@@ -51,6 +52,7 @@ export class ColumnMenuAutoSizeColumnComponent extends ColumnMenuItemBase {
         super();
         this.localization = localization;
         this.ctx = ctx;
+        this.maxWidthIcon = maxWidthIcon;
     }
     ngOnInit() {
         const isVirtualColumns = this.ctx.grid.columnMenuTemplate && this.ctx.grid.virtualColumns;
@@ -69,10 +71,10 @@ ColumnMenuAutoSizeColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion
             class="k-grid-columnmenu-autosize-column"
             [text]="localization.get('autosizeThisColumn')"
             icon="max-width"
+            [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
-        >
-        </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+        ></kendo-grid-columnmenu-item>
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuAutoSizeColumnComponent, decorators: [{
             type: Component,
             args: [{
@@ -83,9 +85,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-grid-columnmenu-autosize-column"
             [text]="localization.get('autosizeThisColumn')"
             icon="max-width"
+            [svgIcon]="maxWidthIcon"
             (itemClick)="autoSizeColumn()"
-        >
-        </kendo-grid-columnmenu-item>
+        ></kendo-grid-columnmenu-item>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ContextService }]; }, propDecorators: { column: [{

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

@@ -6,6 +6,7 @@ import { Component, Input, Output, EventEmitter, ChangeDetectorRef, ElementRef }
 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";
@@ -69,6 +70,7 @@ export class ColumnMenuChooserComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.columnsIcon = columnsIcon;
     }
     get columns() {
         return this.columnInfoService.leafNamedColumns;
@@ -106,6 +108,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         <kendo-grid-columnmenu-item
             [text]="localization.get('columns')"
             icon="columns"
+            [svgIcon]="columnsIcon"
             [expanded]="expanded"
             (collapse)="onCollapse()"
             (expand)="onExpand()">
@@ -124,7 +127,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-grid-columnlist>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i4.ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -133,6 +136,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-grid-columnmenu-item
             [text]="localization.get('columns')"
             icon="columns"
+            [svgIcon]="columnsIcon"
             [expanded]="expanded"
             (collapse)="onCollapse()"
             (expand)="onExpand()">

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { filterIcon } from '@progress/kendo-svg-icons';
 import { ColumnMenuItemBase } from './column-menu-item-base';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
@@ -65,6 +66,7 @@ export class ColumnMenuFilterComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.filterIcon = filterIcon;
     }
     /**
      * @hidden
@@ -89,6 +91,7 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
         <kendo-grid-columnmenu-item
             [text]="localization.get('filter')"
             icon="filter"
+            [svgIcon]="filterIcon"
             [expanded]="expanded"
             (collapse)="onCollapse()"
             (expand)="onExpand()">
@@ -105,7 +108,7 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </kendo-grid-filter-menu-container>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: i4.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -114,6 +117,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-grid-columnmenu-item
             [text]="localization.get('filter')"
             icon="filter"
+            [svgIcon]="filterIcon"
             [expanded]="expanded"
             (collapse)="onCollapse()"
             (expand)="onExpand()">

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_grid_columnmenutemplatedirective %}) directive.
@@ -51,9 +52,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();
@@ -80,7 +78,7 @@ 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-grid-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-grid-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)"
@@ -89,15 +87,16 @@ ColumnMenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [class.k-disabled]="disabled"
             role="button"
             [attr.aria-expanded]="expanded">
-           <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' })),
@@ -156,9 +155,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [class.k-disabled]="disabled"
             role="button"
             [attr.aria-expanded]="expanded">
-           <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">
@@ -174,6 +174,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -184,5 +186,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], contentTemplate: [{
                 type: ContentChild,
-                args: [ColumnMenuItemContentTemplateDirective, { static: false }]
+                args: [ColumnMenuItemContentTemplateDirective]
             }] } });