@progress/kendo-angular-editor 11.0.0-develop.112 → 11.0.0-develop.114

package/esm2020/tools/tables/popup-table-grid.component.mjs

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { Component, Output, EventEmitter } from '@angular/core';
+import { tableWizardIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 /**
@@ -12,6 +13,7 @@ export class PopupTableGridComponent {
     constructor() {
         this.cellClick = new EventEmitter();
         this.tableWizardClick = new EventEmitter();
+        this.tableWizardIcon = tableWizardIcon;
         this.state = { rows: -1, cols: -1 };
         this.rows = 6;
         this.cols = 8;
@@ -57,7 +59,7 @@ PopupTableGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
     `, isInline: true, directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
@@ -77,7 +79,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
     `

package/esm2020/tools/tools.service.mjs

@@ -2,19 +2,20 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { Injectable } from '@angular/core';
+import { Injectable, NgZone } from '@angular/core';
 import { Subject } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * @hidden
  */
 export class EditorToolsService {
-    constructor() {
+    constructor(zone) {
+        this.zone = zone;
         this.needsCheck = new Subject();
     }
 }
-EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 EditorToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });

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

@@ -28,6 +28,9 @@ import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@progress/kendo-angular-dropdowns';
 import { DropDownListComponent, DropDownsModule } from '@progress/kendo-angular-dropdowns';
+import { applyFormatIcon, alignCenterIcon, alignJustifyIcon, alignLeftIcon, alignRightIcon, dropletIcon, rightDoubleQuotesIcon, boldIcon, clearCssIcon, linkIcon, foregroundColorIcon, indentIcon, fileAddIcon, fileImageIcon, listOrderedIcon, listUnorderedIcon, italicIcon, outdentIcon, printIcon, redoIcon, selectAllIcon, strikethroughIcon, subscriptIcon, supscriptIcon, underlineIcon, undoIcon, unlinkIcon, codeSnippetIcon, tableAddIcon, tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertAboveIcon, tableRowInsertBelowIcon, tableRowDeleteIcon, tableColumnDeleteIcon, cellsMergeIcon, cellSplitHorizontallyIcon, tableDeleteIcon, tableWizardIcon, fontSizeIcon, fontFamilyIcon } from '@progress/kendo-svg-icons';
+import * as i6$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i2 from '@progress/kendo-angular-popup';
 
 /**
@@ -37,8 +40,8 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673618923,
-    version: '',
+    publishDate: 1673629315,
+    version: '11.0.0-develop.114',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -1417,15 +1420,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  * @hidden
  */
 class EditorToolsService {
-    constructor() {
+    constructor(zone) {
+        this.zone = zone;
         this.needsCheck = new Subject();
     }
 }
-EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+EditorToolsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable });
 EditorToolsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorToolsService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: function () { return [{ type: i0.NgZone }]; } });
 
 /**
  * @hidden
@@ -1765,6 +1769,7 @@ class EditorFormatComponent extends ToolBarToolComponent {
             { text: 'Heading 5', tag: 'h5' },
             { text: 'Heading 6', tag: 'h6' }
         ];
+        this.applyFormatSVGIcon = applyFormatIcon;
         this.editor = providerService.editor;
     }
     /**
@@ -1890,12 +1895,12 @@ EditorFormatComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-apply-format"></span>
+                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FormatDropDownListComponent, selector: "kendo-editor-format-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFormatComponent, decorators: [{
             type: Component,
             args: [{
@@ -1925,7 +1930,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-apply-format"></span>
+                    <kendo-icon-wrapper name="apply-format" [svgIcon]="applyFormatSVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
@@ -2143,6 +2148,50 @@ const commandIcons = {
     deleteTable: 'table-delete'
     // tableWizard: 'table-wizard'
 };
+/**
+ * @hidden
+ */
+const commandSVGIcons = {
+    alignCenter: alignCenterIcon,
+    alignJustify: alignJustifyIcon,
+    alignLeft: alignLeftIcon,
+    alignRight: alignRightIcon,
+    backColor: dropletIcon,
+    blockquote: rightDoubleQuotesIcon,
+    bold: boldIcon,
+    cleanFormatting: clearCssIcon,
+    createLink: linkIcon,
+    foreColor: foregroundColorIcon,
+    indent: indentIcon,
+    insertFile: fileAddIcon,
+    insertImage: fileImageIcon,
+    insertOrderedList: listOrderedIcon,
+    insertUnorderedList: listUnorderedIcon,
+    italic: italicIcon,
+    outdent: outdentIcon,
+    print: printIcon,
+    redo: redoIcon,
+    selectAll: selectAllIcon,
+    strikethrough: strikethroughIcon,
+    subscript: subscriptIcon,
+    superscript: supscriptIcon,
+    underline: underlineIcon,
+    undo: undoIcon,
+    unlink: unlinkIcon,
+    viewSource: codeSnippetIcon,
+    //table
+    insertTable: tableAddIcon,
+    addColumnBefore: tableColumnInsertLeftIcon,
+    addColumnAfter: tableColumnInsertRightIcon,
+    addRowBefore: tableRowInsertAboveIcon,
+    addRowAfter: tableRowInsertBelowIcon,
+    deleteRow: tableRowDeleteIcon,
+    deleteColumn: tableColumnDeleteIcon,
+    mergeCells: cellsMergeIcon,
+    splitCell: cellSplitHorizontallyIcon,
+    deleteTable: tableDeleteIcon
+    // tableWizard: 'table-wizard'
+};
 
 const MY_TOKEN = new InjectionToken('COMMAND_TOKEN');
 /**
@@ -2155,18 +2204,25 @@ class EditorCommandBaseDirective {
         this.localization = localization;
         this.toolsService = toolsService;
         this.editor = providerService.editor;
-        setTimeout(() => {
-            const text = this.localization.get(this.command);
-            if (text) {
-                this.button.showText = 'overflow';
-                this.button.showIcon = 'both';
-                this.button.text = text;
-            }
-            if (!this.button.toolbarOptions.icon) {
-                this.button.icon = commandIcons[this.command];
-            }
-            this.button.title = text;
-            this.toolsService.needsCheck.next();
+        this.toolsService.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                const text = this.localization.get(this.command);
+                if (text) {
+                    this.button.showText = 'overflow';
+                    this.button.showIcon = 'both';
+                    this.button.text = text;
+                }
+                if (!this.button.toolbarOptions.icon) {
+                    this.button.icon = commandIcons[this.command];
+                }
+                if (!this.button.toolbarOptions.svgIcon) {
+                    this.button.svgIcon = commandSVGIcons[this.command];
+                }
+                this.button.title = text;
+                this.toolsService.zone.run(() => {
+                    this.toolsService.needsCheck.next();
+                });
+            });
         });
     }
     ngOnInit() {
@@ -3971,6 +4027,7 @@ class ColorPickerDialogComponent extends DialogContentBase {
     setData(args) {
         this.editor = args.editor;
         this.value = args.value;
+        this.svgIcon = args.svgIcon;
         this.editorCommand = args.editorCommand;
         this.paletteSettings = args.paletteSettings;
         this.icon = args.icon;
@@ -3992,6 +4049,7 @@ ColorPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [format]="'hex'"
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [(value)]="value"
                 [paletteSettings]="paletteSettings"
                 (activeColorClick)="handleActiveColorClick($event)"
@@ -4018,6 +4076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [format]="'hex'"
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [(value)]="value"
                 [paletteSettings]="paletteSettings"
                 (activeColorClick)="handleActiveColorClick($event)"
@@ -4224,6 +4283,7 @@ class PopupTableGridComponent {
     constructor() {
         this.cellClick = new EventEmitter();
         this.tableWizardClick = new EventEmitter();
+        this.tableWizardIcon = tableWizardIcon;
         this.state = { rows: -1, cols: -1 };
         this.rows = 6;
         this.cols = 8;
@@ -4269,7 +4329,7 @@ PopupTableGridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
     `, isInline: true, directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
@@ -4289,7 +4349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <div class="k-status" unselectable="on">{{ message }}</div>
         <!-- uncomment when TableWizard is completed
         <div class="k-editor-toolbar" unselectable="on">
-            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
+            <button type="button" kendoButton class="k-tool" [icon]="'table-wizard'" [svgIcon]="tableWizardIcon" (click)="openTableWizard()" title="Table Wizard">Table Wizard</button>
         </div>
         -->
     `
@@ -4551,6 +4611,7 @@ class EditorFontSizeComponent extends ToolBarToolComponent {
          * Fires when the user updates the value of the drop-down list.
          */
         this.valueChange = new EventEmitter();
+        this.fontSizeSVGIcon = fontSizeIcon;
         this._data = [
             { text: '8px', size: '8px' },
             { text: '10px', size: '10px' },
@@ -4696,12 +4757,12 @@ EditorFontSizeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-font-size"></span>
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FontSizeDropDownListComponent, selector: "kendo-editor-fontsize-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontSizeComponent, decorators: [{
             type: Component,
             args: [{
@@ -4732,7 +4793,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-font-size"></span>
+                    <kendo-icon-wrapper name="font-size" [svgIcon]="fontSizeSVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
@@ -4760,6 +4821,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['fontSizeButton', { read: ElementRef }]
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * A component which configures an existing `DropDownListComponent` as an Editor tool
  * ([see example]({% slug toolbartools_editor %}#toc-built-in-tools)).
@@ -4784,6 +4846,7 @@ class EditorFontFamilyComponent extends ToolBarToolComponent {
          * Fires when the user updates the value of the drop-down list.
          */
         this.valueChange = new EventEmitter();
+        this.fontFamilySVGIcon = fontFamilyIcon;
         this._data = [
             { text: 'Arial', fontName: 'Arial,"Helvetica Neue",Helvetica,sans-serif' },
             { text: 'Courier New', fontName: '"Courier New",Courier,"Lucida Sans Typewriter","Lucida Typewriter",monospace' },
@@ -4922,12 +4985,12 @@ EditorFontFamilyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-font-family"></span>
+                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: FontFamilyDropDownListComponent, selector: "kendo-editor-fontfamily-dropdownlist", inputs: ["data", "value", "defaultItem", "itemDisabled", "title", "disabled", "tabindex"], outputs: ["valueChange"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorFontFamilyComponent, decorators: [{
             type: Component,
             args: [{
@@ -4958,7 +5021,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-font-family"></span>
+                    <kendo-icon-wrapper name="font-family" [svgIcon]="fontFamilySVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
@@ -4986,7 +5049,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: ['fontFamilyButton', { read: ElementRef }]
             }] } });
 
-// eslint-disable no-forward-ref
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * A component which configures an existing ColorPickerComponent as a ToolBar tool.
  * To associate a `kendo-toolbar-colorpicker` with an Editor command that changes the
@@ -5107,6 +5170,7 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
             editorCommand: this.editorCommand,
             paletteSettings: this.paletteSettings,
             icon: this.icon,
+            svgIcon: this.svgIcon,
             views: this.views
         });
     }
@@ -5136,20 +5200,15 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
         this.tabindex = -1;
         return false;
     }
-    /**
-     * @hidden
-     */
-    getIconClasses() {
-        return `k-icon k-i-${this.icon}`;
-    }
 }
 EditorColorPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, deps: [{ token: EditorLocalizationService }, { token: i1$1.DialogService }, { token: i0.NgZone }, { token: ProviderService }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
+EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: EditorColorPickerComponent, selector: "kendo-toolbar-colorpicker", inputs: { value: "value", icon: "icon", svgIcon: "svgIcon", paletteSettings: "paletteSettings", editorCommand: "editorCommand", disabled: "disabled", views: "views", view: "view" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => EditorColorPickerComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "element", first: true, predicate: ["colorpicker"], descendants: true, read: ElementRef }, { propertyName: "colorPicker", first: true, predicate: ["colorpicker"], descendants: true, read: ColorPickerComponent }, { propertyName: "colorPickerButton", first: true, predicate: ["colorPickerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <kendo-colorpicker
                 #colorpicker
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [views]="views"
                 [format]="'hex'"
                 [value]="value"
@@ -5174,12 +5233,16 @@ EditorColorPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span *ngIf="icon" [ngClass]="getIconClasses()"></span>
+                    <kendo-icon-wrapper
+                        *ngIf="icon"
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i4.ColorPickerComponent, selector: "kendo-colorpicker", inputs: ["views", "view", "activeView", "readonly", "disabled", "format", "value", "popupSettings", "paletteSettings", "gradientSettings", "icon", "iconClass", "svgIcon", "clearButton", "tabindex", "preview", "actionsLayout", "size", "rounded", "fillMode"], outputs: ["valueChange", "open", "close", "focus", "blur", "cancel", "activeColorClick", "activeViewChange"], exportAs: ["kendoColorPicker"] }, { type: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorColorPickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -5191,6 +5254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 #colorpicker
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [views]="views"
                 [format]="'hex'"
                 [value]="value"
@@ -5215,7 +5279,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span *ngIf="icon" [ngClass]="getIconClasses()"></span>
+                    <kendo-icon-wrapper
+                        *ngIf="icon"
+                        [name]="icon"
+                        [svgIcon]="svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
@@ -5226,6 +5294,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], paletteSettings: [{
                 type: Input
             }], editorCommand: [{
@@ -5270,6 +5340,7 @@ class EditorInsertTableButtonComponent extends ToolBarToolComponent {
         this.popupService = popupService;
         this.dialogService = dialogService;
         this.renderer = renderer;
+        this.addTableSVGIcon = tableAddIcon;
         this.open = false;
         this.buttonBlurred = new EventEmitter();
         this.cellClicked = new EventEmitter();
@@ -5404,6 +5475,7 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [attr.title]="title"
                 [attr.tabindex]="tabIndex"
                 icon="table-add"
+                [svgIcon]="addTableSVGIcon"
                 [disabled]="disabled"
                 (click)="toggle()"
                 (blur)="onBlur()"
@@ -5418,7 +5490,7 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-table-add"></span>
+                    <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
@@ -5426,7 +5498,7 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
         <ng-template #popupGridTemplate>
             <kendo-popup-table-grid (cellClick)="onCellClick($event)" (tableWizardClick)="onTableWizardClick()"></kendo-popup-table-grid>
         </ng-template>
-    `, 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: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, 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: i6$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: PopupTableGridComponent, selector: "kendo-popup-table-grid", outputs: ["cellClick", "tableWizardClick"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: EditorInsertTableButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -5441,6 +5513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [attr.title]="title"
                 [attr.tabindex]="tabIndex"
                 icon="table-add"
+                [svgIcon]="addTableSVGIcon"
                 [disabled]="disabled"
                 (click)="toggle()"
                 (blur)="onBlur()"
@@ -5455,7 +5528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (click)="openDialog()">
                 <span
                     class="k-link k-menu-link">
-                    <span class="k-icon k-i-table-add"></span>
+                    <kendo-icon-wrapper name="table-add" [svgIcon]="addTableSVGIcon"></kendo-icon-wrapper>
                     <span *ngIf="title" class="k-menu-link-text">{{title}}</span>
                 </span>
             </div>
@@ -5737,6 +5810,7 @@ class EditorForeColorDirective {
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.foreColor;
+        this.colorPicker.svgIcon = commandSVGIcons.foreColor;
         this.colorPicker.editorCommand = 'foreColor';
     }
 }
@@ -5758,6 +5832,7 @@ class EditorBackColorDirective {
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.backColor;
+        this.colorPicker.svgIcon = commandSVGIcons.backColor;
         this.colorPicker.editorCommand = 'backColor';
     }
 }
@@ -6367,6 +6442,7 @@ EditorModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         DropDownsModule,
         NumericTextBoxModule,
         CheckBoxModule,
+        IconsModule,
         ToolBarModule,
         TextBoxModule,
         TextAreaModule,
@@ -6449,6 +6525,7 @@ EditorModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
             DropDownsModule,
             NumericTextBoxModule,
             CheckBoxModule,
+            IconsModule,
             ToolBarModule,
             TextBoxModule,
             TextAreaModule,
@@ -6492,6 +6569,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DropDownsModule,
                         NumericTextBoxModule,
                         CheckBoxModule,
+                        IconsModule,
                         ToolBarModule,
                         TextBoxModule,
                         TextAreaModule,