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

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: 1673467053,
-    version: '',
+    publishDate: 1674059953,
+    version: '11.0.1-develop.1',
     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"

package/esm2020/pager/pager-prev-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 { caretAltLeftIcon, caretAltToLeftIcon } 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 PagerPrevButtonsComponent extends PagerElementComponent {
     constructor(localization, pagerContext, cd, navigationService) {
         super(localization, pagerContext, cd);
         this.navigationService = navigationService;
+        this.caretAltLeftIcon = caretAltLeftIcon;
+        this.caretAltToLeftIcon = caretAltToLeftIcon;
     }
     /**
      * @hidden
@@ -49,6 +52,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"
@@ -62,6 +66,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"
@@ -85,6 +90,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"
@@ -98,6 +104,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"

package/esm2020/rendering/constants.mjs

@@ -13,7 +13,7 @@ export const NON_DATA_ROW_CLASSES = 'k-grouping-row k-group-footer k-detail-row
 /**
  * @hidden
  */
-export const IGNORE_TARGET_CLASSSES = 'k-icon';
+export const IGNORE_TARGET_CLASSSES = 'k-icon k-svg-icon';
 /**
  * @hidden
  */

package/esm2020/rendering/header/header.component.mjs

@@ -28,6 +28,7 @@ import { hasItems } from '../../column-menu/utils';
 import { closestInScope, isFocusable } from '../common/dom-queries';
 import { FilterMenuComponent } from '../../filtering/menu/filter-menu.component';
 import { ColumnMenuComponent } from '../../column-menu/column-menu.component';
+import { sortAscSmallIcon, sortDescSmallIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "../../common/single-popup.service";
 import * as i2 from "../../dragdrop/drag-hint.service";
@@ -39,17 +40,18 @@ import * as i7 from "@progress/kendo-angular-l10n";
 import * as i8 from "./../../common/column-info.service";
 import * as i9 from "../../filtering/menu/filter-menu.component";
 import * as i10 from "../../column-menu/column-menu.component";
-import * as i11 from "../../filtering/filter-row.component";
-import * as i12 from "@angular/common";
-import * as i13 from "../../navigation/logical-row.directive";
-import * as i14 from "../../navigation/logical-cell.directive";
-import * as i15 from "../../dragdrop/drop-target.directive";
-import * as i16 from "@progress/kendo-angular-common";
-import * as i17 from "../../dragdrop/draggable-column.directive";
-import * as i18 from "../common/template-context.directive";
-import * as i19 from "../../selection/selectall-checkbox.directive";
-import * as i20 from "../../navigation/focusable.directive";
-import * as i21 from "../../column-resizing/column-handle.directive";
+import * as i11 from "@progress/kendo-angular-icons";
+import * as i12 from "../../filtering/filter-row.component";
+import * as i13 from "@angular/common";
+import * as i14 from "../../navigation/logical-row.directive";
+import * as i15 from "../../navigation/logical-cell.directive";
+import * as i16 from "../../dragdrop/drop-target.directive";
+import * as i17 from "@progress/kendo-angular-common";
+import * as i18 from "../../dragdrop/draggable-column.directive";
+import * as i19 from "../common/template-context.directive";
+import * as i20 from "../../selection/selectall-checkbox.directive";
+import * as i21 from "../../navigation/focusable.directive";
+import * as i22 from "../../column-resizing/column-handle.directive";
 const mergeObjects = (...args) => Object.assign.apply(null, [{}].concat(args));
 const directions = initialDirection => initialDirection === "asc" ? ["asc", "desc"] : ["desc", "asc"];
 /**
@@ -99,6 +101,8 @@ export class HeaderComponent {
         this.sortedFields = {};
         this.hostClass = true;
         this.dropTargets = new QueryList();
+        this.sortAscSmallIcon = sortAscSmallIcon;
+        this.sortDescSmallIcon = sortDescSmallIcon;
         this.subscription = new Subscription();
     }
     get headerClass() {
@@ -167,14 +171,6 @@ export 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;
@@ -332,12 +328,12 @@ export 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;
     }
@@ -527,7 +523,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>
@@ -642,7 +643,7 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
                 [logicalSlaveCellsCount]="unlockedColumnsCount"
         ></tr>
     </ng-container>
-    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i14.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i16.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i17.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i12.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i12.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i19.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i20.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i21.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
+    `, isInline: true, components: [{ type: i9.FilterMenuComponent, selector: "kendo-grid-filter-menu", inputs: ["column", "filter", "tabIndex"] }, { type: i10.ColumnMenuComponent, selector: "kendo-grid-column-menu", inputs: ["standalone", "column", "settings", "sort", "filter", "sortable", "columnMenuTemplate", "tabIndex"] }, { type: i11.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i12.FilterRowComponent, selector: "[kendoGridFilterRow]", inputs: ["columns", "filter", "groups", "detailTemplate", "logicalRowIndex", "lockedColumnsCount"] }], directives: [{ type: i13.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i14.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i16.DropTargetDirective, selector: "[kendoDropTarget]", inputs: ["context"], outputs: ["enter", "leave", "drop"] }, { type: i17.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i18.DraggableColumnDirective, selector: "[kendoDraggableColumn]", inputs: ["context", "enableDrag"], outputs: ["drag"] }, { type: i13.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i13.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i19.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i20.SelectAllCheckboxDirective, selector: "[kendoGridSelectAllCheckbox]", inputs: ["state"], outputs: ["selectAllChange"] }, { type: i21.FocusableDirective, selector: "[kendoGridFocusable],\n        [kendoGridEditCommand],\n        [kendoGridRemoveCommand],\n        [kendoGridSaveCommand],\n        [kendoGridCancelCommand],\n        [kendoGridSelectionCheckbox]\n    ", inputs: ["kendoGridFocusable"] }, { type: i22.ColumnHandleDirective, selector: "[kendoGridColumnHandle]", inputs: ["columns", "column"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -751,7 +752,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>

package/esm2020/rendering/table-body.component.mjs

@@ -23,6 +23,7 @@ import { defaultTrackBy } from '../common/default-track-by';
 import { DetailsService } from './details/details.service';
 import { NON_DATA_CELL_CLASSES, NON_DATA_ROW_CLASSES, IGNORE_TARGET_CLASSSES, IGNORE_CONTAINER_CLASSES } from './constants';
 import { CellSelectionService } from '../selection/cell-selection.service';
+import { minusIcon, plusIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./details/details.service";
 import * as i2 from "../grouping/groups.service";
@@ -36,11 +37,12 @@ import * as i9 from "../common/column-info.service";
 import * as i10 from "../navigation/navigation.service";
 import * as i11 from "./cell.component";
 import * as i12 from "../grouping/group-header.component";
-import * as i13 from "@progress/kendo-angular-common";
-import * as i14 from "@angular/common";
-import * as i15 from "../navigation/logical-row.directive";
-import * as i16 from "../navigation/logical-cell.directive";
-import * as i17 from "./common/template-context.directive";
+import * as i13 from "@progress/kendo-angular-icons";
+import * as i14 from "@progress/kendo-angular-common";
+import * as i15 from "@angular/common";
+import * as i16 from "../navigation/logical-row.directive";
+import * as i17 from "../navigation/logical-cell.directive";
+import * as i18 from "./common/template-context.directive";
 const columnCellIndex = (cell, cells) => {
     let cellIndex = 0;
     for (let idx = 0; idx < cells.length; idx++) {
@@ -81,6 +83,8 @@ export 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);
@@ -104,9 +108,13 @@ export 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';
@@ -482,12 +490,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
@@ -598,7 +609,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: i11.CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: i12.GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i13.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i14.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i15.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i14.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i16.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i14.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i14.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i17.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i14.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, components: [{ type: i11.CellComponent, selector: "[kendoGridCell]", inputs: ["column", "columnIndex", "isNew", "isLoading", "isVirtual", "loadingTemplate", "rowIndex", "dataItem"] }, { type: i12.GroupHeaderComponent, selector: "[kendoGridGroupHeader]", inputs: ["rowIndex", "logicalRowIndex", "item", "skipGroupDecoration", "hasDetails", "totalColumnsCount", "hasGroupHeaderColumn", "groupHeaderColumns", "columns", "groups"] }, { type: i13.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i14.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i16.LogicalRowDirective, selector: "[kendoGridLogicalRow]", inputs: ["logicalRowIndex", "logicalSlaveRow", "logicalCellsCount", "logicalSlaveCellsCount", "dataRowIndex", "dataItem"] }, { type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i17.LogicalCellDirective, selector: "[kendoGridLogicalCell]", inputs: ["logicalColIndex", "logicalRowIndex", "logicalSlaveCell", "colIndex", "colSpan", "rowSpan", "groupItem", "dataRowIndex", "dataItem", "detailExpandCell", "headerLabelText"] }, { type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i15.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i18.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TableBodyComponent, decorators: [{
             type: Component,
             args: [{
@@ -704,12 +715,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