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

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

package/esm2020/grouping/group-header.component.mjs

@@ -8,14 +8,16 @@ import { GroupsService } from './groups.service';
 import { columnsSpan } from '../columns/column-common';
 import { getGroupRowArgs } from './utils';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { caretAltDownIcon, caretAltRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./groups.service";
 import * as i2 from "./group-info.service";
 import * as i3 from "@progress/kendo-angular-l10n";
-import * as i4 from "@angular/common";
-import * as i5 from "../navigation/logical-cell.directive";
-import * as i6 from "../rendering/common/template-context.directive";
-import * as i7 from "../rendering/common/field-accessor.pipe";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "@angular/common";
+import * as i6 from "../navigation/logical-cell.directive";
+import * as i7 from "../rendering/common/template-context.directive";
+import * as i8 from "../rendering/common/field-accessor.pipe";
 /**
  * @hidden
  */
@@ -29,6 +31,8 @@ export class GroupHeaderComponent {
         this.totalColumnsCount = 0;
         this.groups = [];
         this.isExpanded = false;
+        this.caretAltDownIcon = caretAltDownIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
         this.groupItemClass = true;
         this.tableGroupRowClass = true;
     }
@@ -103,10 +107,12 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             <p class="k-reset">
                 <ng-container *ngIf="!skipGroupDecoration">
                     <a href="#" tabindex="-1" (click)="toggleGroup(item)"
-                        class="k-icon"
-                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded, 'k-i-caret-alt-right': !isExpanded }" role="presentation"
+                        role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
+                        <kendo-icon-wrapper
+                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
+                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}
@@ -150,7 +156,7 @@ GroupHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
                 </ng-template>
             </td>
         </ng-container>
-    `, isInline: true, directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": i7.FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": i8.FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -175,10 +181,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             <p class="k-reset">
                 <ng-container *ngIf="!skipGroupDecoration">
                     <a href="#" tabindex="-1" (click)="toggleGroup(item)"
-                        class="k-icon"
-                        [ngClass]="{ 'k-i-caret-alt-down': isExpanded, 'k-i-caret-alt-right': !isExpanded }" role="presentation"
+                        role="presentation"
                         [attr.title]="groupButtonTitle"
                         [attr.aria-label]="groupButtonTitle">
+                        <kendo-icon-wrapper
+                            [name]="isExpanded ? 'caret-alt-down' : 'caret-alt-right'"
+                            [svgIcon]="isExpanded ? caretAltDownIcon : caretAltRightIcon"></kendo-icon-wrapper>
                     </a>
                     <ng-container *ngIf="!groupHeaderTemplate(item)">
                     {{groupTitle(item)}}: {{item.data | valueOf:"value": formatForGroup(item)}}

package/esm2020/grouping/group-panel.component.mjs

@@ -12,6 +12,7 @@ import { DragHintService } from '../dragdrop/drag-hint.service';
 import { DropCueService } from '../dragdrop/drop-cue.service';
 import { position, isTargetBefore } from '../dragdrop/common';
 import { tap, filter, switchMapTo, takeUntil } from 'rxjs/operators';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../dragdrop/drag-hint.service";
 import * as i2 from "../dragdrop/drop-cue.service";
@@ -80,6 +81,9 @@ export class GroupPanelComponent {
     getDirectionIcon(group) {
         return group.dir === 'desc' ? 'sort-desc-sm' : 'sort-asc-sm';
     }
+    getDirectionSvgIcon(group) {
+        return group.dir === 'desc' ? sortDescSmallIcon : sortAscSmallIcon;
+    }
     directionChange(group) {
         group.dir = group.dir ? group.dir : "asc";
         group.dir = group.dir === 'asc' ? 'desc' : 'asc';
@@ -168,6 +172,7 @@ GroupPanelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 [label]="groupTitles[index]"
                 [removable]="true"
                 [icon]="getDirectionIcon(group)"
+                [svgIcon]=""
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
             >
@@ -217,6 +222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [label]="groupTitles[index]"
                 [removable]="true"
                 [icon]="getDirectionIcon(group)"
+                [svgIcon]=""
                 (contentClick)="directionChange(group)"
                 (remove)="remove(group)"
             >

package/esm2020/package-metadata.mjs

@@ -9,7 +9,7 @@ export const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673469393,
+    publishDate: 1673519302,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };

package/esm2020/pager/pager-next-buttons.component.mjs

@@ -7,6 +7,7 @@ import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/
 import { PagerContextService } from "./pager-context.service";
 import { PagerElementComponent } from './pager-element.component';
 import { LocalizationService } from '@progress/kendo-angular-l10n';
+import { caretAltRightIcon, caretAltToRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "./pager-context.service";
@@ -20,6 +21,8 @@ export class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
         this.navigationService = navigationService;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -46,6 +49,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             [size]="size"
             icon="caret-alt-right"
+            [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -60,6 +64,7 @@ PagerNextButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             type="button"
             [size]="size"
             icon="caret-alt-to-right"
+            [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"
@@ -81,6 +86,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type="button"
             [size]="size"
             icon="caret-alt-right"
+            [svgIcon]="caretAltRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav"
@@ -95,6 +101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             type="button"
             [size]="size"
             icon="caret-alt-to-right"
+            [svgIcon]="caretAltToRightIcon"
             fillMode="flat"
             rounded="none"
             class="k-pager-nav k-pager-last"