@progress/kendo-angular-grid 11.0.0-develop.99 → 11.0.0

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]
             }] } });

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { lockIcon, unlockIcon } 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";
@@ -47,6 +48,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');
@@ -54,6 +57,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;
     }
@@ -91,10 +97,11 @@ ColumnMenuLockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
        <kendo-grid-columnmenu-item
             [text]="text"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             (itemClick)="toggleColumn()"
             [disabled]="disabled">
        </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"] }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-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: [{
@@ -103,6 +110,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
        <kendo-grid-columnmenu-item
             [text]="text"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             (itemClick)="toggleColumn()"
             [disabled]="disabled">
        </kendo-grid-columnmenu-item>

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, Input, Output, EventEmitter, ElementRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { setColumnPositionIcon } 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";
@@ -63,6 +64,7 @@ export class ColumnMenuPositionComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.setColumnPositionIcon = setColumnPositionIcon;
         this._isLast = false;
     }
     /**
@@ -121,6 +123,7 @@ ColumnMenuPositionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         <kendo-grid-columnmenu-item
             [text]="localization.get('setColumnPosition')"
             icon="set-column-position"
+            [svgIcon]="setColumnPositionIcon"
             [expanded]="expanded"
             (keydown.tab)="onTab($event, !expanded)"
             (collapse)="onCollapse()"
@@ -138,7 +141,7 @@ ColumnMenuPositionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </kendo-grid-columnmenu-stick>
             </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.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i4.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i2.ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: i3.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i4.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }], directives: [{ type: i5.ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuPositionComponent, decorators: [{
             type: Component,
             args: [{
@@ -147,6 +150,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-grid-columnmenu-item
             [text]="localization.get('setColumnPosition')"
             icon="set-column-position"
+            [svgIcon]="setColumnPositionIcon"
             [expanded]="expanded"
             (keydown.tab)="onTab($event, !expanded)"
             (collapse)="onCollapse()"

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";
@@ -48,6 +49,8 @@ export class ColumnMenuSortComponent extends ColumnMenuItemBase {
         this.localization = localization;
         this.sortService = sortService;
         this.renderer = renderer;
+        this.sortAscSmallIcon = sortAscSmallIcon;
+        this.sortDescSmallIcon = sortDescSmallIcon;
     }
     get sortedAsc() {
         const descriptor = this.descriptor;
@@ -85,16 +88,18 @@ ColumnMenuSortComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortAscending')"
             icon="sort-asc-small"
+            [svgIcon]="sortAscSmallIcon"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortDescending')"
             icon="sort-desc-small"
+            [svgIcon]="sortDescSmallIcon"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </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"] }] });
+    `, isInline: true, components: [{ type: i3.ColumnMenuItemComponent, selector: "kendo-grid-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: [{
@@ -103,12 +108,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortAscending')"
             icon="sort-asc-small"
+            [svgIcon]="sortAscSmallIcon"
             (itemClick)="toggleSort('asc')"
             [selected]="sortedAsc">
         </kendo-grid-columnmenu-item>
         <kendo-grid-columnmenu-item
             [text]="localization.get('sortDescending')"
             icon="sort-desc-small"
+            [svgIcon]="sortDescSmallIcon"
             (itemClick)="toggleSort('desc')"
             [selected]="sortedDesc">
         </kendo-grid-columnmenu-item>

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

@@ -4,6 +4,7 @@
 *-------------------------------------------------------------------------------------------*/
 import { Component, ChangeDetectorRef } from '@angular/core';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
+import { stickIcon, unstickIcon } 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";
@@ -47,6 +48,8 @@ export class ColumnMenuStickComponent extends ColumnMenuItemBase {
         this.localization = localization;
         this.columnInfoService = columnInfoService;
         this.changeDetector = changeDetector;
+        this.stickIcon = stickIcon;
+        this.unstickIcon = unstickIcon;
     }
     get text() {
         return this.localization.get(this.sticky ? 'unstick' : 'stick');
@@ -54,6 +57,9 @@ export class ColumnMenuStickComponent extends ColumnMenuItemBase {
     get icon() {
         return this.sticky ? 'unstick' : 'stick';
     }
+    get svgIcon() {
+        return this.sticky ? this.unstickIcon : this.stickIcon;
+    }
     get disabled() {
         return !this.sticky && this.columnInfoService.unlockedRootCount < 2;
     }
@@ -88,16 +94,26 @@ export class ColumnMenuStickComponent extends ColumnMenuItemBase {
 }
 ColumnMenuStickComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuStickComponent, deps: [{ token: i1.LocalizationService }, { token: i2.ColumnInfoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ColumnMenuStickComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick", usesInheritance: true, ngImport: i0, template: `
-       <kendo-grid-columnmenu-item [text]="text" [icon]="icon" (itemClick)="toggleColumn()" [disabled]="disabled">
-       </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"] }] });
+        <kendo-grid-columnmenu-item
+           [text]="text"
+           [icon]="icon"
+           [svgIcon]="svgIcon"
+           (itemClick)="toggleColumn()"
+           [disabled]="disabled">
+        </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"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuStickComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-grid-columnmenu-stick',
                     template: `
-       <kendo-grid-columnmenu-item [text]="text" [icon]="icon" (itemClick)="toggleColumn()" [disabled]="disabled">
-       </kendo-grid-columnmenu-item>
+        <kendo-grid-columnmenu-item
+           [text]="text"
+           [icon]="icon"
+           [svgIcon]="svgIcon"
+           (itemClick)="toggleColumn()"
+           [disabled]="disabled">
+        </kendo-grid-columnmenu-item>
     `
                 }]
         }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });

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

@@ -13,23 +13,25 @@ import { hasFilter, hasSort, hasLock, hasStick, hasColumnChooser, hasAutoSizeCol
 import { replaceMessagePlaceholder } from '../utils';
 import { ContextService } from '../common/provider.service';
 import { ColunnMenuErrorMessages } from '../common/error-messages';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./../navigation/navigation.service";
 import * as i2 from "../common/single-popup.service";
 import * as i3 from "@progress/kendo-angular-l10n";
 import * as i4 from "./column-menu.service";
 import * as i5 from "../common/provider.service";
-import * as i6 from "./column-menu-container.component";
-import * as i7 from "./column-menu-sort.component";
-import * as i8 from "./column-menu-lock.component";
-import * as i9 from "./column-menu-stick.component";
-import * as i10 from "./column-menu-position.component";
-import * as i11 from "./column-menu-chooser.component";
-import * as i12 from "./column-menu-autosize.component";
-import * as i13 from "./column-menu-autosize-all.component";
-import * as i14 from "./column-menu-filter.component";
-import * as i15 from "@angular/common";
-import * as i16 from "./column-menu-item.directive";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "./column-menu-container.component";
+import * as i8 from "./column-menu-sort.component";
+import * as i9 from "./column-menu-lock.component";
+import * as i10 from "./column-menu-stick.component";
+import * as i11 from "./column-menu-position.component";
+import * as i12 from "./column-menu-chooser.component";
+import * as i13 from "./column-menu-autosize.component";
+import * as i14 from "./column-menu-autosize-all.component";
+import * as i15 from "./column-menu-filter.component";
+import * as i16 from "@angular/common";
+import * as i17 from "./column-menu-item.directive";
 const POPUP_CLASS = 'k-grid-columnmenu-popup';
 /**
  * Represents the [column menu]({% slug columnmenu_grid %}) component.
@@ -69,6 +71,7 @@ export class ColumnMenuComponent {
          * @hidden
          */
         this.expandedPosition = false;
+        this.moreVerticalIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     /**
@@ -207,7 +210,9 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             href="#"
             [tabindex]="tabIndex"
             [attr.title]="columnMenuTitle">
-            <span class="k-icon k-i-more-vertical"></span>
+            <kendo-icon-wrapper
+                name="more-vertical"
+                [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <ng-container
@@ -268,7 +273,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-grid-columnmenu-filter>
             </kendo-grid-columnmenu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i6.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i7.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i8.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i9.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i10.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i11.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i12.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i13.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i14.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
+    `, isInline: true, components: [{ type: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: i8.ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: i9.ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: i10.ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: i11.ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: i12.ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: i13.ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: i14.ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: i15.ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i16.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i16.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i16.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i17.ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -286,7 +291,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             href="#"
             [tabindex]="tabIndex"
             [attr.title]="columnMenuTitle">
-            <span class="k-icon k-i-more-vertical"></span>
+            <kendo-icon-wrapper
+                name="more-vertical"
+                [svgIcon]="moreVerticalIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <ng-container

package/esm2020/column-menu/column-menu.module.mjs

@@ -21,6 +21,7 @@ import { ColumnMenuStickComponent } from './column-menu-stick.component';
 import { ColumnMenuPositionComponent } from './column-menu-position.component';
 import { ColumnMenuAutoSizeColumnComponent } from './column-menu-autosize.component';
 import { ColumnMenuAutoSizeAllColumnsComponent } from './column-menu-autosize-all.component';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 const COMPONENTS = [
     ColumnListComponent,
@@ -80,7 +81,7 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuStickComponent,
         ColumnMenuPositionComponent,
         ColumnMenuAutoSizeColumnComponent,
-        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule], exports: [ColumnListComponent,
+        ColumnMenuAutoSizeAllColumnsComponent], imports: [CommonModule, FilterMenuModule, ButtonModule], exports: [ColumnListComponent,
         ColumnChooserComponent,
         ColumnMenuChooserComponent,
         ColumnMenuFilterComponent,
@@ -96,12 +97,12 @@ ColumnMenuModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         ColumnMenuPositionComponent,
         ColumnMenuAutoSizeColumnComponent,
         ColumnMenuAutoSizeAllColumnsComponent] });
-ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule]] });
+ColumnMenuModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, imports: [[CommonModule, FilterMenuModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [COMPONENTS],
-                    imports: [CommonModule, FilterMenuModule],
+                    imports: [CommonModule, FilterMenuModule, ButtonModule],
                     exports: [COMPONENTS]
                 }]
         }] });

package/esm2020/dragdrop/draggable-column.directive.mjs

@@ -23,8 +23,8 @@ import * as i5 from "../navigation/navigation.service";
  */
 const preventOnDblClick = release => mouseDown => of(mouseDown).pipe(delay(150), takeUntil(release));
 const hasClass = className => el => new RegExp(`(^| )${className}( |$)`).test(el.className);
-const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-icon-button'));
-const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'));
+const isDeleteButton = or(hasClass('k-i-x'), hasClass('k-svg-i-x'), hasClass('k-icon-button'));
+const isSortIcon = or(hasClass('k-i-sort-asc-small'), hasClass('k-i-sort-desc-small'), hasClass('k-svg-i-sort-asc-small'), hasClass('k-svg-i-sort-desc-small'));
 const skipButtons = and(not(isDeleteButton), not(isSortIcon), not(isFocusableWithTabKey), not(matchesNodeName('label')));
 const elementUnderCursor = ({ clientX, clientY }) => isDocumentAvailable() && document.elementFromPoint(clientX, clientY);
 const hideThenShow = (element, cont) => {

package/esm2020/excel/excel-command.directive.mjs

@@ -53,9 +53,10 @@ export class ExcelCommandDirective extends Button {
 ExcelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExcelCommandDirective, deps: [{ token: i1.ExcelService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i2.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
 ExcelCommandDirective.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ExcelCommandDirective, selector: "[kendoGridExcelCommand]", host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-grid-excel": "this.excelClass" } }, usesInheritance: true, ngImport: i0, template: `
         <kendo-icon-wrapper
-            *ngIf="icon"
+            *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
-            [name]="icon"></kendo-icon-wrapper>
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
         <span *ngIf="imageUrl" class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
         </span>
@@ -68,9 +69,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     selector: '[kendoGridExcelCommand]',
                     template: `
         <kendo-icon-wrapper
-            *ngIf="icon"
+            *ngIf="icon || svgIcon"
             innerCssClass="k-button-icon"
-            [name]="icon"></kendo-icon-wrapper>
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
         <span *ngIf="imageUrl" class="k-button-icon k-icon">
             <img [src]="imageUrl" class="k-image" role="presentation" />
         </span>

package/esm2020/filtering/cell/filter-cell-operators.component.mjs

@@ -7,6 +7,7 @@ import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';
 import { Keys } from '@progress/kendo-angular-common';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
 import { SizingOptionsService } from '../../layout/sizing-options.service';
+import { filterClearIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "../../layout/sizing-options.service";
@@ -22,6 +23,7 @@ export class FilterCellOperatorsComponent {
         this.localization = localization;
         this.sizing = sizing;
         this.clearText = 'Clear';
+        this.filterClearIcon = filterClearIcon;
         /**
          * @hidden
          */
@@ -118,6 +120,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             kendoGridFocusable
             *ngIf="showButton"
             icon="filter-clear"
+            [svgIcon]="filterClearIcon"
             [title]="clearText"
             [size]="size"
             (click)="clearClick()"
@@ -149,6 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             kendoGridFocusable
             *ngIf="showButton"
             icon="filter-clear"
+            [svgIcon]="filterClearIcon"
             [title]="clearText"
             [size]="size"
             (click)="clearClick()"

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

@@ -10,12 +10,14 @@ import { SinglePopupService } from '../../common/single-popup.service';
 import { filtersByField } from '../base-filter-cell.component';
 import { LocalizationService } from "@progress/kendo-angular-l10n";
 import { replaceMessagePlaceholder } from '../../utils';
+import { filterIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../filter.service";
 import * as i2 from "../../common/single-popup.service";
 import * as i3 from "@progress/kendo-angular-l10n";
 import * as i4 from "./../../navigation/navigation.service";
-import * as i5 from "./filter-menu-container.component";
+import * as i5 from "@progress/kendo-angular-icons";
+import * as i6 from "./filter-menu-container.component";
 /**
  * @hidden
  */
@@ -25,6 +27,7 @@ export class FilterMenuComponent {
         this.popupService = popupService;
         this.localization = localization;
         this.navigationService = navigationService;
+        this.filterIcon = filterIcon;
         this.tabIndex = '-1';
     }
     get hasFilters() {
@@ -70,7 +73,9 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
             [attr.title]="filterLabel">
-            <span class="k-icon k-i-filter"></span>
+            <kendo-icon-wrapper
+                name="filter"
+                [svgIcon]="filterIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <kendo-grid-filter-menu-container
@@ -82,7 +87,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-grid-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i5.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i5.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i6.FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FilterMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -96,7 +101,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (keydown.enter)="$event.stopImmediatePropagation()"
             href="#"
             [attr.title]="filterLabel">
-            <span class="k-icon k-i-filter"></span>
+            <kendo-icon-wrapper
+                name="filter"
+                [svgIcon]="filterIcon"></kendo-icon-wrapper>
         </a>
         <ng-template #template>
             <kendo-grid-filter-menu-container