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

package/fesm2015/progress-kendo-angular-grid.mjs

@@ -19,6 +19,7 @@ import { orderBy, isCompositeFilterDescriptor, process, filterBy } from '@progre
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import * as i1$3 from '@angular/platform-browser';
+import { caretAltLeftIcon, caretAltToLeftIcon, caretAltRightIcon, caretAltToRightIcon, sortDescSmallIcon, sortAscSmallIcon, filterIcon, unlockIcon, lockIcon, stickIcon, unstickIcon, setColumnPositionIcon, columnsIcon, maxWidthIcon, displayInlineBlockIcon, moreVerticalIcon, filterClearIcon, caretAltDownIcon, minusIcon, plusIcon } from '@progress/kendo-svg-icons';
 import * as i4$1 from '@progress/kendo-angular-buttons';
 import { ButtonModule, ChipModule, Button } from '@progress/kendo-angular-buttons';
 import * as i3 from '@progress/kendo-angular-inputs';
@@ -27,13 +28,13 @@ import * as i1$4 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, DropDownListModule, AutoCompleteModule, DropDownsModule } from '@progress/kendo-angular-dropdowns';
 import * as i5 from '@progress/kendo-angular-label';
 import { LabelModule } from '@progress/kendo-angular-label';
+import * as i3$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i5$1 from '@progress/kendo-angular-dateinputs';
 import { DatePickerModule } from '@progress/kendo-angular-dateinputs';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import { getter } from '@progress/kendo-common';
 import * as i1$5 from '@progress/kendo-angular-intl';
-import * as i3$1 from '@progress/kendo-angular-icons';
-import { IconsModule } from '@progress/kendo-angular-icons';
 import { PDFExportMarginComponent, PDFExportTemplateDirective, PDFExportComponent } from '@progress/kendo-angular-pdf-export';
 import { saveAs } from '@progress/kendo-file-saver';
 import { workbookOptions, toDataURL, ColumnBase as ColumnBase$1, ExcelExportModule } from '@progress/kendo-angular-excel-export';
@@ -2855,8 +2856,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-grid',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673467053,
-    version: '',
+    publishDate: 1674059953,
+    version: '11.0.1-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -6902,6 +6903,8 @@ class PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
         this.navigationService = navigationService;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -6931,6 +6934,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
             icon="caret-alt-to-left"
+            [svgIcon]="caretAltToLeftIcon"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -6944,6 +6948,7 @@ PagerPrevButtonsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
+            [svgIcon]="caretAltLeftIcon"
             fillMode="flat"
             rounded="none"
             [size]="size"
@@ -6967,6 +6972,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (click)="currentPage !== 1 ? changePage(0) : false"
             role="button"
             icon="caret-alt-to-left"
+            [svgIcon]="caretAltToLeftIcon"
             class="k-pager-nav k-pager-first"
             [disabled]="disabled"
             fillMode="flat"
@@ -6980,6 +6986,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             class="k-pager-nav"
             [disabled]="disabled"
             icon="caret-alt-left"
+            [svgIcon]="caretAltLeftIcon"
             fillMode="flat"
             rounded="none"
             [size]="size"
@@ -7425,6 +7432,8 @@ class PagerNextButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
         this.navigationService = navigationService;
+        this.caretAltRightIcon = caretAltRightIcon;
+        this.caretAltToRightIcon = caretAltToRightIcon;
     }
     /**
      * @hidden
@@ -7451,6 +7460,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"
@@ -7465,6 +7475,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"
@@ -7486,6 +7497,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"
@@ -7500,6 +7512,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"
@@ -8281,8 +8294,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 const preventOnDblClick$1 = 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) => {
@@ -8450,6 +8463,9 @@ 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';
@@ -8538,6 +8554,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)"
             >
@@ -8587,6 +8604,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)"
             >
@@ -11125,6 +11143,7 @@ class FilterMenuComponent {
         this.popupService = popupService;
         this.localization = localization;
         this.navigationService = navigationService;
+        this.filterIcon = filterIcon;
         this.tabIndex = '-1';
     }
     get hasFilters() {
@@ -11170,7 +11189,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
@@ -11182,7 +11203,7 @@ FilterMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 >
             </kendo-grid-filter-menu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: 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: [{
@@ -11196,7 +11217,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
@@ -11414,9 +11437,6 @@ class ColumnMenuItemComponent {
         this.collapse = new EventEmitter();
         this.contentState = 'collapsed';
     }
-    get iconClass() {
-        return `k-i-${this.icon}`;
-    }
     ngOnChanges(changes) {
         if (changes.expanded) {
             this.updateContentState();
@@ -11443,7 +11463,7 @@ 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)"
@@ -11452,15 +11472,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: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], animations: [
         trigger('state', [
             state('collapsed', style({ display: 'none' })),
             state('expanded', style({ display: 'block' })),
@@ -11519,9 +11540,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">
@@ -11537,6 +11559,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Output
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], text: [{
                 type: Input
             }], selected: [{
@@ -11547,7 +11571,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], contentTemplate: [{
                 type: ContentChild,
-                args: [ColumnMenuItemContentTemplateDirective, { static: false }]
+                args: [ColumnMenuItemContentTemplateDirective]
             }] } });
 
 /**
@@ -11587,6 +11611,8 @@ 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');
@@ -11594,6 +11620,9 @@ 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;
     }
@@ -11631,10 +11660,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: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: 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: [{
@@ -11643,6 +11673,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>
@@ -11687,6 +11718,8 @@ 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');
@@ -11694,6 +11727,9 @@ 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;
     }
@@ -11728,16 +11764,26 @@ 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: 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: 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: 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: ColumnInfoService }, { type: i0.ChangeDetectorRef }]; } });
@@ -11793,6 +11839,7 @@ class ColumnMenuPositionComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.setColumnPositionIcon = setColumnPositionIcon;
         this._isLast = false;
     }
     /**
@@ -11851,6 +11898,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()"
@@ -11868,7 +11916,7 @@ ColumnMenuPositionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 </kendo-grid-columnmenu-stick>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }, { type: i4.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: [{
@@ -11877,6 +11925,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()"
@@ -12171,6 +12220,7 @@ class ColumnMenuChooserComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.columnsIcon = columnsIcon;
     }
     get columns() {
         return this.columnInfoService.leafNamedColumns;
@@ -12208,6 +12258,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()">
@@ -12226,7 +12277,7 @@ ColumnMenuChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 </kendo-grid-columnlist>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuChooserComponent, decorators: [{
             type: Component,
             args: [{
@@ -12235,6 +12286,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()">
@@ -12320,6 +12372,7 @@ class ColumnMenuFilterComponent extends ColumnMenuItemBase {
          * @hidden
          */
         this.actionsClass = 'k-columnmenu-actions';
+        this.filterIcon = filterIcon;
     }
     /**
      * @hidden
@@ -12344,6 +12397,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()">
@@ -12360,7 +12414,7 @@ ColumnMenuFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 </kendo-grid-filter-menu-container>
             </ng-template>
         </kendo-grid-columnmenu-item>
-    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
+    `, isInline: true, components: [{ type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }, { type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }], directives: [{ type: ColumnMenuItemContentTemplateDirective, selector: "[kendoGridColumnMenuItemContentTemplate]" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuFilterComponent, decorators: [{
             type: Component,
             args: [{
@@ -12369,6 +12423,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()">
@@ -12562,6 +12617,8 @@ 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;
@@ -12599,16 +12656,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: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "text", "selected", "disabled", "expanded"], outputs: ["itemClick", "expand", "collapse"] }] });
+    `, isInline: true, components: [{ type: 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: [{
@@ -12617,12 +12676,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>
@@ -12668,6 +12729,7 @@ 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;
@@ -12686,10 +12748,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: 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: 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: [{
@@ -12700,9 +12762,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: ContextService }]; }, propDecorators: { column: [{
@@ -12747,6 +12809,7 @@ 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;
@@ -12764,10 +12827,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: 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: 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: [{
@@ -12777,9 +12840,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: ContextService }]; } });
@@ -12823,6 +12886,7 @@ class ColumnMenuComponent {
          * @hidden
          */
         this.expandedPosition = false;
+        this.moreVerticalIcon = moreVerticalIcon;
         this.closeSubscription = service.closeMenu.subscribe(this.close.bind(this));
     }
     /**
@@ -12961,7 +13025,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
@@ -13022,7 +13088,7 @@ ColumnMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-grid-columnmenu-filter>
             </kendo-grid-columnmenu-container>
         </ng-template>
-    `, isInline: true, components: [{ type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }], directives: [{ type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnMenuComponent, decorators: [{
             type: Component,
             args: [{
@@ -13040,7 +13106,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
@@ -13138,6 +13206,7 @@ class FilterCellOperatorsComponent {
         this.localization = localization;
         this.sizing = sizing;
         this.clearText = 'Clear';
+        this.filterClearIcon = filterClearIcon;
         /**
          * @hidden
          */
@@ -13234,6 +13303,7 @@ FilterCellOperatorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12
             kendoGridFocusable
             *ngIf="showButton"
             icon="filter-clear"
+            [svgIcon]="filterClearIcon"
             [title]="clearText"
             [size]="size"
             (click)="clearClick()"
@@ -13265,6 +13335,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()"
@@ -14663,6 +14734,8 @@ class HeaderComponent {
         this.sortedFields = {};
         this.hostClass = true;
         this.dropTargets = new QueryList();
+        this.sortAscSmallIcon = sortAscSmallIcon;
+        this.sortDescSmallIcon = sortDescSmallIcon;
         this.subscription = new Subscription();
     }
     get headerClass() {
@@ -14731,14 +14804,6 @@ class HeaderComponent {
             .findIndex(x => x.field === field)
             + 1;
     }
-    sortIcon(field) {
-        const state = this.sortDescriptor(field);
-        return {
-            'k-icon': isPresent(state.dir),
-            'k-i-sort-desc-small': state.dir === "desc",
-            'k-i-sort-asc-small': state.dir === "asc"
-        };
-    }
     sortState(column) {
         if (!this.isSortable(column)) {
             return;
@@ -14896,12 +14961,12 @@ class HeaderComponent {
     isColumnGroupComponent(column) {
         return isColumnGroupComponent(column);
     }
-    get columnLevels() {
-        return new Array((this.totalColumnLevels || 0) + 1);
-    }
     sortDescriptor(field) {
         return this.sort.find(item => item.field === field) || { field };
     }
+    get columnLevels() {
+        return new Array((this.totalColumnLevels || 0) + 1);
+    }
     get leafColumns() {
         return this._leafColumns;
     }
@@ -15091,7 +15156,12 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
                                 <span class="k-sort-icon">
-                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                    <kendo-icon-wrapper
+                                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
+                                        role="note" [attr.aria-label]="sortableLabel"
+                                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                                        ></kendo-icon-wrapper>
                                 </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
                             </span>
@@ -15206,7 +15276,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i1$1.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -15315,7 +15385,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                                     <span class="k-column-title">{{column.displayTitle}}</span>
                                 </ng-container>
                                 <span class="k-sort-icon">
-                                    <span role="note" [attr.aria-label]="sortableLabel" [ngClass]="sortIcon(getColumnComponent(column).field)"></span>
+                                    <kendo-icon-wrapper
+                                        *ngIf="sortDescriptor(getColumnComponent(column).field).dir"
+                                        role="note" [attr.aria-label]="sortableLabel"
+                                        name="sort-{{sortDescriptor(getColumnComponent(column).field).dir}}-small"
+                                        [svgIcon]="sortDescriptor(getColumnComponent(column).field).dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon"
+                                        ></kendo-icon-wrapper>
                                 </span>
                                 <span *ngIf="showSortNumbering(getColumnComponent(column))" class="k-sort-order">{{sortOrder(getColumnComponent(column).field)}}</span>
                             </span>
@@ -15665,7 +15740,7 @@ const NON_DATA_ROW_CLASSES = 'k-grouping-row k-group-footer k-detail-row k-grid-
 /**
  * @hidden
  */
-const IGNORE_TARGET_CLASSSES = 'k-icon';
+const IGNORE_TARGET_CLASSSES = 'k-icon k-svg-icon';
 /**
  * @hidden
  */
@@ -16236,6 +16311,8 @@ class GroupHeaderComponent {
         this.totalColumnsCount = 0;
         this.groups = [];
         this.isExpanded = false;
+        this.caretAltDownIcon = caretAltDownIcon;
+        this.caretAltRightIcon = caretAltRightIcon;
         this.groupItemClass = true;
         this.tableGroupRowClass = true;
     }
@@ -16310,10 +16387,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)}}
@@ -16357,7 +16436,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: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": FieldAccessorPipe } });
+    `, isInline: true, components: [{ type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "valueOf": FieldAccessorPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: GroupHeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -16382,10 +16461,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)}}
@@ -16499,6 +16580,8 @@ class TableBodyComponent {
         this.totalColumnsCount = 0;
         this.trackBy = defaultTrackBy;
         this.hostClass = true;
+        this.minusIcon = minusIcon;
+        this.plusIcon = plusIcon;
         this.rowClass = () => null;
         this.cellKeydownSubscription = this.navigationService.cellKeydown.subscribe((args) => this.cellKeydownHandler(args));
         this.trackByWrapper = this.trackByWrapper.bind(this);
@@ -16522,9 +16605,13 @@ class TableBodyComponent {
     isExpanded(viewItem) {
         return this.detailsService.isExpanded(viewItem.index, viewItem.data);
     }
-    detailButtonStyles(viewItem) {
+    detailButtonIconName(viewItem) {
         const expanded = this.isExpanded(viewItem);
-        return expanded ? 'k-i-minus' : 'k-i-plus';
+        return expanded ? 'minus' : 'plus';
+    }
+    detailButtonSvgIcon(viewItem) {
+        const expanded = this.isExpanded(viewItem);
+        return expanded ? this.minusIcon : this.plusIcon;
     }
     detailButtonTitle(viewItem) {
         const messageKey = this.isExpanded(viewItem) ? 'detailCollapse' : 'detailExpand';
@@ -16900,12 +16987,15 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
                     [detailExpandCell]="true"
                     aria-selected="false"
                     role="gridcell">
-                <a class="k-icon"
+                <a
                     *ngIf="detailTemplate.showIf(item.data, $any(item).index)"
-                    [ngClass]="detailButtonStyles(item)"
                     [attr.title]="detailButtonTitle(item)"
                     [attr.aria-label]="detailButtonTitle(item)"
-                    href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)"></a>
+                    href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)">
+                    <kendo-icon-wrapper
+                        [name]="detailButtonIconName(item)"
+                        [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
+                </a>
             </td>
             <td
                 kendoGridCell
@@ -17016,7 +17106,7 @@ TableBodyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         </tr>
     </ng-container>
     <kendo-resize-sensor *ngIf="rowSticky" (resize)="resizeHandler()"></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i3$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i1$1.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -17122,12 +17212,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [detailExpandCell]="true"
                     aria-selected="false"
                     role="gridcell">
-                <a class="k-icon"
+                <a
                     *ngIf="detailTemplate.showIf(item.data, $any(item).index)"
-                    [ngClass]="detailButtonStyles(item)"
                     [attr.title]="detailButtonTitle(item)"
                     [attr.aria-label]="detailButtonTitle(item)"
-                    href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)"></a>
+                    href="#" tabindex="-1" (click)="toggleRow($any(item).index, item.data)">
+                    <kendo-icon-wrapper
+                        [name]="detailButtonIconName(item)"
+                        [svgIcon]="detailButtonSvgIcon(item)"></kendo-icon-wrapper>
+                </a>
             </td>
             <td
                 kendoGridCell
@@ -23677,7 +23770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * })
  *
  * class AppComponent {
- *   public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
+ *     public data: any[] = [{ Field1: 'Foo', Field2: 'Bar' }];
  * }
  * ```
  */
@@ -23689,6 +23782,10 @@ 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.
          */
@@ -23711,7 +23808,7 @@ 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 },
@@ -23722,7 +23819,7 @@ 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();
                 }
             }));
@@ -23765,12 +23862,13 @@ class ColumnChooserComponent {
 ColumnChooserComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ColumnChooserComponent, deps: [{ token: i1.LocalizationService }, { token: ColumnInfoService }, { token: i1$2.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
@@ -23783,19 +23881,20 @@ ColumnChooserComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (columnChange)="onChange($event)">
             </kendo-grid-columnlist>
         </ng-template>
-    `, isInline: true, components: [{ type: ColumnListComponent, selector: "kendo-grid-columnlist", inputs: ["columns", "autoSync", "allowHideAll", "applyText", "resetText", "actionsClass", "isLast", "isExpanded", "service"], outputs: ["reset", "apply", "columnChange"] }] });
+    `, isInline: true, components: [{ type: i4$1.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: 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
@@ -23874,7 +23973,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,
@@ -23890,12 +23989,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]
                 }]
         }] });
@@ -26261,9 +26360,10 @@ class ExcelCommandDirective extends Button {
 ExcelCommandDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ExcelCommandDirective, deps: [{ token: ExcelService }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.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>
@@ -26276,9 +26376,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>