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

package/fesm2020/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,7 +40,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-editor',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673618923,
+    publishDate: 1673621121,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1421,15 +1424,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
@@ -1769,6 +1773,7 @@ class EditorFormatComponent extends ToolBarToolComponent {
             { text: 'Heading 5', tag: 'h5' },
             { text: 'Heading 6', tag: 'h6' }
         ];
+        this.applyFormatSVGIcon = applyFormatIcon;
         this.editor = providerService.editor;
     }
     /**
@@ -1894,12 +1899,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: [{
@@ -1929,7 +1934,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>
@@ -2147,6 +2152,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');
 /**
@@ -2159,18 +2208,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() {
@@ -3973,6 +4029,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;
@@ -3994,6 +4051,7 @@ ColorPickerDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
                 [format]="'hex'"
                 [attr.title]="title"
                 [icon]="icon"
+                [svgIcon]="svgIcon"
                 [(value)]="value"
                 [paletteSettings]="paletteSettings"
                 (activeColorClick)="handleActiveColorClick($event)"
@@ -4020,6 +4078,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)"
@@ -4226,6 +4285,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;
@@ -4271,7 +4331,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"] }] });
@@ -4291,7 +4351,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>
         -->
     `
@@ -4553,6 +4613,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' },
@@ -4698,12 +4759,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: [{
@@ -4734,7 +4795,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>
@@ -4762,6 +4823,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)).
@@ -4786,6 +4848,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' },
@@ -4924,12 +4987,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: [{
@@ -4960,7 +5023,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>
@@ -4988,7 +5051,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
@@ -5109,6 +5172,7 @@ class EditorColorPickerComponent extends ToolBarToolComponent {
             editorCommand: this.editorCommand,
             paletteSettings: this.paletteSettings,
             icon: this.icon,
+            svgIcon: this.svgIcon,
             views: this.views
         });
     }
@@ -5137,20 +5201,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"
@@ -5175,12 +5234,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: [{
@@ -5192,6 +5255,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"
@@ -5216,7 +5280,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>
@@ -5227,6 +5295,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], paletteSettings: [{
                 type: Input
             }], editorCommand: [{
@@ -5271,6 +5341,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();
@@ -5405,6 +5476,7 @@ EditorInsertTableButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion:
                 [attr.title]="title"
                 [attr.tabindex]="tabIndex"
                 icon="table-add"
+                [svgIcon]="addTableSVGIcon"
                 [disabled]="disabled"
                 (click)="toggle()"
                 (blur)="onBlur()"
@@ -5419,7 +5491,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>
@@ -5427,7 +5499,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: [{
@@ -5442,6 +5514,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()"
@@ -5456,7 +5529,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>
@@ -5738,6 +5811,7 @@ class EditorForeColorDirective {
     constructor(colorPicker) {
         this.colorPicker = colorPicker;
         this.colorPicker.icon = commandIcons.foreColor;
+        this.colorPicker.svgIcon = commandSVGIcons.foreColor;
         this.colorPicker.editorCommand = 'foreColor';
     }
 }
@@ -5759,6 +5833,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-editor",
-  "version": "11.0.0-develop.112",
+  "version": "11.0.0-develop.113",
   "description": "Kendo UI Editor for Angular",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -23,17 +23,18 @@
     "@progress/kendo-drawing": "^1.5.12",
     "@progress/kendo-editor-common": "1.9.3",
     "@progress/kendo-licensing": "^1.0.2",
-    "@progress/kendo-angular-buttons": "11.0.0-develop.112",
-    "@progress/kendo-angular-common": "11.0.0-develop.112",
-    "@progress/kendo-angular-dialog": "11.0.0-develop.112",
-    "@progress/kendo-angular-dropdowns": "11.0.0-develop.112",
-    "@progress/kendo-angular-inputs": "11.0.0-develop.112",
-    "@progress/kendo-angular-intl": "11.0.0-develop.112",
-    "@progress/kendo-angular-l10n": "11.0.0-develop.112",
-    "@progress/kendo-angular-layout": "11.0.0-develop.112",
-    "@progress/kendo-angular-popup": "11.0.0-develop.112",
-    "@progress/kendo-angular-schematics": "11.0.0-develop.112",
-    "@progress/kendo-angular-toolbar": "11.0.0-develop.112",
+    "@progress/kendo-angular-buttons": "11.0.0-develop.113",
+    "@progress/kendo-angular-common": "11.0.0-develop.113",
+    "@progress/kendo-angular-dialog": "11.0.0-develop.113",
+    "@progress/kendo-angular-dropdowns": "11.0.0-develop.113",
+    "@progress/kendo-angular-inputs": "11.0.0-develop.113",
+    "@progress/kendo-angular-intl": "11.0.0-develop.113",
+    "@progress/kendo-angular-l10n": "11.0.0-develop.113",
+    "@progress/kendo-angular-layout": "11.0.0-develop.113",
+    "@progress/kendo-angular-icons": "11.0.0-develop.113",
+    "@progress/kendo-angular-popup": "11.0.0-develop.113",
+    "@progress/kendo-angular-schematics": "11.0.0-develop.113",
+    "@progress/kendo-angular-toolbar": "11.0.0-develop.113",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "dependencies": {

package/schematics/ngAdd/index.js

@@ -8,7 +8,9 @@ function default_1(options) {
             // peer dependency of kendo-angular-layout
             '@progress/kendo-angular-progressbar': '^3.0.0',
             // peer dependency of kendo-angular-inputs
-            '@progress/kendo-angular-dialog': '^7.0.0'
+            '@progress/kendo-angular-dialog': '^7.0.0',
+            // Peer dependency of icons
+            "@progress/kendo-svg-icons": "^1.0.0"
         } });
     return (0, schematics_1.externalSchematic)('@progress/kendo-angular-schematics', 'ng-add', finalOptions);
 }

package/tools/colorpicker/editor-colorpicker.component.d.ts

@@ -8,6 +8,7 @@ import { PaletteSettings, ActiveColorClickEvent, ColorPickerComponent, ColorPick
 import { EditorLocalizationService } from '../../localization/editor-localization.service';
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { ProviderService } from '../../common/provider.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * A component which configures an existing ColorPickerComponent as a ToolBar tool.
@@ -28,6 +29,11 @@ export declare class EditorColorPickerComponent extends ToolBarToolComponent {
      * Specifies the Kendo UI font icon that will be used.
      */
     icon: string;
+    /**
+     * Defines an SVGIcon to be rendered within the ColorPicker button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    svgIcon: SVGIcon;
     /**
      * Overrides the default [color palette settings]({% slug api_inputs_palettesettings %}).
      */
@@ -109,10 +115,6 @@ export declare class EditorColorPickerComponent extends ToolBarToolComponent {
      * @hidden
      */
     handleKey(): boolean;
-    /**
-     * @hidden
-     */
-    getIconClasses(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<EditorColorPickerComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<EditorColorPickerComponent, "kendo-toolbar-colorpicker", never, { "value": "value"; "icon": "icon"; "paletteSettings": "paletteSettings"; "editorCommand": "editorCommand"; "disabled": "disabled"; "views": "views"; "view": "view"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<EditorColorPickerComponent, "kendo-toolbar-colorpicker", never, { "value": "value"; "icon": "icon"; "svgIcon": "svgIcon"; "paletteSettings": "paletteSettings"; "editorCommand": "editorCommand"; "disabled": "disabled"; "views": "views"; "view": "view"; }, {}, never, never>;
 }

package/tools/fontfamily/editor-fontfamily.component.d.ts

@@ -10,6 +10,7 @@ import { DialogService } from '@progress/kendo-angular-dialog';
 import { FontFamilyDropDownListComponent } from './editor-fontfamily-dropdownlist.component';
 import { ProviderService } from '../../common/provider.service';
 import { EditorToolsService } from '../tools.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * A component which configures an existing `DropDownListComponent` as an Editor tool
@@ -55,6 +56,7 @@ export declare class EditorFontFamilyComponent extends ToolBarToolComponent {
         dataItem: any;
         index: number;
     }) => boolean;
+    fontFamilySVGIcon: SVGIcon;
     private subs;
     private editor;
     private _data;

package/tools/fontsize/editor-fontsize.component.d.ts

@@ -11,6 +11,7 @@ import { DialogService } from '@progress/kendo-angular-dialog';
 import { FontSizeDropDownListComponent } from './editor-fontsize-dropdownlist.component';
 import { ProviderService } from '../../common/provider.service';
 import { EditorToolsService } from '../tools.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * A component which configures an existing `DropDownListComponent` as an Editor tool
@@ -52,6 +53,7 @@ export declare class EditorFontSizeComponent extends ToolBarToolComponent {
      * @hidden
      */
     defaultItem: FontSizeItem;
+    fontSizeSVGIcon: SVGIcon;
     /**
      * @hidden
      */

package/tools/format/editor-format.component.d.ts

@@ -11,6 +11,7 @@ import { EditorLocalizationService } from '../../localization/editor-localizatio
 import { FormatDropDownListComponent } from './editor-format-dropdownlist.component';
 import { ProviderService } from '../../common/provider.service';
 import { EditorToolsService } from '../tools.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * A component which configures an existing `DropDownListComponent` as an Editor tool
@@ -48,6 +49,7 @@ export declare class EditorFormatComponent extends ToolBarToolComponent {
     formatButton: ElementRef;
     private subs;
     private _data;
+    applyFormatSVGIcon: SVGIcon;
     private editor;
     constructor(dialogService: DialogService, localization: EditorLocalizationService, providerService: ProviderService, toolsService: EditorToolsService, renderer: Renderer2);
     ngOnInit(): void;

package/tools/tables/editor-insert-table-button.component.d.ts

@@ -9,6 +9,7 @@ import { EditorLocalizationService } from '../../localization/editor-localizatio
 import { DialogService } from '@progress/kendo-angular-dialog';
 import { ProviderService } from '../../common/provider.service';
 import { TableData } from '../../common/table-data.interface';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * A toolbar component which allows the user to create and insert a table in the Editor's content.
@@ -36,6 +37,7 @@ export declare class EditorInsertTableButtonComponent extends ToolBarToolCompone
      * @hidden
      */
     disabled: boolean;
+    addTableSVGIcon: SVGIcon;
     private open;
     private buttonBlurred;
     private cellClicked;

package/tools/tables/popup-table-grid.component.d.ts

@@ -3,6 +3,7 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import { EventEmitter } from '@angular/core';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import { TableData } from '../../common/table-data.interface';
 import * as i0 from "@angular/core";
 /**
@@ -11,6 +12,7 @@ import * as i0 from "@angular/core";
 export declare class PopupTableGridComponent {
     cellClick: EventEmitter<TableData>;
     tableWizardClick: EventEmitter<any>;
+    tableWizardIcon: SVGIcon;
     private state;
     private rows;
     private cols;