@progress/kendo-angular-toolbar 11.0.0-develop.106 → 11.0.0-develop.107

package/fesm2020/progress-kendo-angular-toolbar.mjs

@@ -3,20 +3,23 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, ElementRef, NgModule } from '@angular/core';
-import * as i2$1 from '@progress/kendo-angular-popup';
+import { EventEmitter, Injectable, Component, Input, Output, HostBinding, HostListener, Directive, forwardRef, ElementRef, ViewContainerRef, ContentChildren, ViewChild, ViewChildren, isDevMode, NgModule } from '@angular/core';
+import * as i2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
-import * as i6 from '@progress/kendo-angular-common';
+import * as i7 from '@progress/kendo-angular-common';
 import { Keys, guid, isDocumentAvailable, ResizeSensorModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { validatePackage } from '@progress/kendo-licensing';
 import { take, filter, takeUntil } from 'rxjs/operators';
 import { Subject, Subscription, merge, fromEvent } from 'rxjs';
-import * as i2 from '@angular/common';
+import { moreVerticalIcon } from '@progress/kendo-svg-icons';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$1 from '@progress/kendo-angular-buttons';
 import { DropDownButtonComponent, ButtonsModule } from '@progress/kendo-angular-buttons';
+import * as i2$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 
 /**
  * @hidden
@@ -25,7 +28,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-toolbar',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673542209,
+    publishDate: 1673545261,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -630,7 +633,7 @@ ToolBarRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0
         <ng-container *ngIf="location === 'overflow' && tool.responsive">
             <ng-template [ngTemplateOutlet]="template"></ng-template>
         </ng-container>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+    `, isInline: true, directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarRendererComponent, decorators: [{
             type: Component,
             args: [{
@@ -754,6 +757,7 @@ class ToolBarComponent {
         this.subscriptions = new Subscription();
         this.popupSubs = new Subscription();
         this.role = 'toolbar';
+        this.moreVerticalIcon = moreVerticalIcon;
         /**
          * @hidden
          */
@@ -1232,7 +1236,7 @@ class ToolBarComponent {
         return classes;
     }
 }
-ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2$1.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ToolBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarComponent, deps: [{ token: i1.LocalizationService }, { token: i2.PopupService }, { token: RefreshService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
 ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarComponent, selector: "kendo-toolbar", inputs: { overflow: "overflow", resizable: "resizable", popupSettings: "popupSettings", tabindex: "tabindex", size: "size", tabIndex: "tabIndex" }, outputs: { open: "open", close: "close" }, host: { listeners: { "focus": "onFocus($event)", "focusout": "onFocusOut($event)" }, properties: { "class.k-toolbar": "this.hostClass", "attr.role": "this.role", "attr.dir": "this.getDir", "class.k-toolbar-resizable": "this.resizableClass" } }, providers: [
         RefreshService,
         NavigationService,
@@ -1241,7 +1245,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             provide: L10N_PREFIX,
             useValue: 'kendo.toolbar'
         }
-    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "renderedTools", predicate: ["toolbarRenderer"], descendants: true }, { propertyName: "overflowRenderedTools", predicate: ["overflowRenderer"], descendants: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "allTools", predicate: ToolBarToolComponent }], viewQueries: [{ propertyName: "overflowButton", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "resizeSensor", first: true, predicate: ["resizeSensor"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "renderedTools", predicate: ["toolbarRenderer"], descendants: true }, { propertyName: "overflowRenderedTools", predicate: ["overflowRenderer"], descendants: true }], exportAs: ["kendoToolBar"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoToolbarLocalizedMessages
         i18n-moreToolsTitle="kendo.toolbar.moreToolsTitle|The title of the **more tools** button in a responsive ToolBar"
         moreToolsTitle="More tools"
@@ -1257,8 +1261,12 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             ></kendo-toolbar-renderer>
         </ng-container>
         <button
+            kendoButton
+            fillMode="flat"
             #overflowButton
             type="button"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
@@ -1269,11 +1277,10 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-toolbar-overflow-button k-button k-button-flat k-button-flat-base k-icon-button"
+            class="k-toolbar-overflow-button"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
-            <span class="k-button-icon k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
             <div
@@ -1294,7 +1301,7 @@ ToolBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versi
         </ng-template>
         <ng-container #container></ng-container>
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
-    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: ToolBarRendererComponent, selector: "kendo-toolbar-renderer", inputs: ["tool", "location", "resizable"], outputs: ["rendererClick"], exportAs: ["kendoToolBarRenderer"] }, { type: i1$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: i7.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }], directives: [{ type: LocalizedToolbarMessagesDirective, selector: "[kendoToolbarLocalizedMessages]" }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarComponent, decorators: [{
             type: Component,
             args: [{
@@ -1325,8 +1332,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             ></kendo-toolbar-renderer>
         </ng-container>
         <button
+            kendoButton
+            fillMode="flat"
             #overflowButton
             type="button"
+            icon="more-vertical"
+            [svgIcon]="moreVerticalIcon"
             tabindex="-1"
             [title]="moreToolsTitle"
             [attr.aria-label]="moreToolsTitle"
@@ -1337,11 +1348,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [style.visibility]="'hidden'"
             [style.position]="'relative'"
             [style.margin-inline-start]="'auto'"
-            class="k-toolbar-overflow-button k-button k-button-flat k-button-flat-base k-icon-button"
+            class="k-toolbar-overflow-button"
             [ngClass]="overflowClass"
             (click)="showPopup()"
         >
-            <span class="k-button-icon k-icon k-i-more-vertical"></span>
         </button>
         <ng-template #popupTemplate>
             <div
@@ -1364,7 +1374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         <kendo-resize-sensor *ngIf="overflow" #resizeSensor></kendo-resize-sensor>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2$1.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { overflow: [{
+        }], ctorParameters: function () { return [{ type: i1.LocalizationService }, { type: i2.PopupService }, { type: RefreshService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { overflow: [{
                 type: Input
             }], resizable: [{
                 type: Input
@@ -1386,7 +1396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 args: [ToolBarToolComponent]
             }], overflowButton: [{
                 type: ViewChild,
-                args: ['overflowButton', { static: false }]
+                args: ['overflowButton', { static: false, read: ElementRef }]
             }], popupTemplate: [{
                 type: ViewChild,
                 args: ['popupTemplate', { static: true }]
@@ -1491,12 +1501,14 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._showText = 'both';
@@ -1547,6 +1559,20 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
         this.toolbarOptions.iconClass = getValueForLocation(iconClass, this.showIcon, false);
         this.overflowOptions.iconClass = getValueForLocation(iconClass, this.showIcon, true);
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() &&
+            icon &&
+            (this.toolbarOptions.icon || this.overflowOptions.icon) &&
+            (this.toolbarOptions.iconClass || this.overflowOptions.iconClass)) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this.toolbarOptions.svgIcon = getValueForLocation(icon, this.showIcon, false);
+        this.overflowOptions.svgIcon = getValueForLocation(icon, this.showIcon, true);
+    }
     /**
      * Defines a URL which is used for an `img` element inside the Button.
      * The URL can be relative or absolute. If relative, it is evaluated with relation to the web page URL.
@@ -1603,17 +1629,6 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
             this.selectedChange.emit(this.selected);
         }
     }
-    /**
-     * @hidden
-     */
-    getIconClasses() {
-        if (this.overflowOptions.icon) {
-            return `k-icon k-i-${this.overflowOptions.icon}`;
-        }
-        else if (this.overflowOptions.iconClass) {
-            return this.overflowOptions.iconClass;
-        }
-    }
     /**
      * @hidden
      */
@@ -1630,7 +1645,7 @@ class ToolBarButtonComponent extends ToolBarToolComponent {
     }
 }
 ToolBarButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
+ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ToolBarButtonComponent, selector: "kendo-toolbar-button", inputs: { showText: "showText", showIcon: "showIcon", text: "text", style: "style", className: "className", title: "title", disabled: "disabled", toggleable: "toggleable", look: "look", togglable: "togglable", selected: "selected", fillMode: "fillMode", themeColor: "themeColor", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon", imageUrl: "imageUrl" }, outputs: { click: "click", pointerdown: "pointerdown", selectedChange: "selectedChange" }, providers: [{ provide: ToolBarToolComponent, useExisting: forwardRef(() => ToolBarButtonComponent) }], viewQueries: [{ propertyName: "toolbarTemplate", first: true, predicate: ["toolbarTemplate"], descendants: true, static: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true, static: true }, { propertyName: "toolbarButtonElement", first: true, predicate: ["toolbarButton"], descendants: true, read: ElementRef }, { propertyName: "overflowButtonElement", first: true, predicate: ["overflowButton"], descendants: true, read: ElementRef }], exportAs: ["kendoToolBarButton"], usesInheritance: true, ngImport: i0, template: `
         <ng-template #toolbarTemplate>
             <button
                 #toolbarButton
@@ -1648,6 +1663,7 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 (click)="click.emit($event)"
                 (pointerdown)="pointerdown.emit($event)"
@@ -1669,13 +1685,19 @@ ToolBarButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 (click)="handleClick($event)">
                 <span
                     class="k-link k-menu-link"
-                    [class.k-selected]="selected">
-                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    [class.k-selected]="selected"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$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"] }], directives: [{ type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1$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: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -1700,6 +1722,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [selected]="selected"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 (click)="click.emit($event)"
                 (pointerdown)="pointerdown.emit($event)"
@@ -1721,8 +1744,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 (click)="handleClick($event)">
                 <span
                     class="k-link k-menu-link"
-                    [class.k-selected]="selected">
-                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    [class.k-selected]="selected"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
@@ -1759,6 +1788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], imageUrl: [{
                 type: Input
             }], click: [{
@@ -1895,11 +1926,14 @@ class ToolBarButtonGroupComponent extends ToolBarToolComponent {
      */
     getIconClasses(button) {
         if (button.overflowOptions.icon) {
-            return `k-icon k-i-${button.overflowOptions.icon}`;
+            return `${button.overflowOptions.icon}`;
         }
-        else if (button.overflowOptions.iconClass) {
+        if (button.overflowOptions.iconClass) {
             return button.overflowOptions.iconClass;
         }
+        if (button.overflowOptions.svgIcon) {
+            return button.overflowOptions.svgIcon;
+        }
     }
     focusButton(index, ev) {
         // Guard against focusing twice on mousedown.
@@ -1934,6 +1968,7 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                     [themeColor]="button.fillMode ? button.themeColor : null"
                     [icon]="button.toolbarOptions.icon"
                     [iconClass]="button.toolbarOptions.iconClass"
+                    [svgIcon]="button.toolbarOptions.svgIcon"
                     [imageUrl]="button.toolbarOptions.imageUrl"
                     (click)="button.click.emit($event); onButtonClick($event)"
                     (pointerdown)="button.pointerdown.emit($event)"
@@ -1955,14 +1990,20 @@ ToolBarButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                     (click)="handleClick($event, button)">
                     <span
                         class="k-link k-menu-link"
-                        [class.k-selected]="button.selected">
-                        <span *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass" [ngClass]="getIconClasses(button)"></span>
+                        [class.k-selected]="button.selected"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
+                            [name]="button.overflowOptions.icon"
+                            [customFontClass]="button.overflowOptions.iconClass"
+                            [svgIcon]="button.overflowOptions.svgIcon"
+                        ></kendo-icon-wrapper>
                         <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
                     </span>
                 </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i1$1.ButtonGroupComponent, selector: "kendo-buttongroup", inputs: ["disabled", "selection", "width", "tabIndex", "navigable"], outputs: ["navigate"], exportAs: ["kendoButtonGroup"] }, { type: i1$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: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
@@ -1994,6 +2035,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     [themeColor]="button.fillMode ? button.themeColor : null"
                     [icon]="button.toolbarOptions.icon"
                     [iconClass]="button.toolbarOptions.iconClass"
+                    [svgIcon]="button.toolbarOptions.svgIcon"
                     [imageUrl]="button.toolbarOptions.imageUrl"
                     (click)="button.click.emit($event); onButtonClick($event)"
                     (pointerdown)="button.pointerdown.emit($event)"
@@ -2015,8 +2057,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     (click)="handleClick($event, button)">
                     <span
                         class="k-link k-menu-link"
-                        [class.k-selected]="button.selected">
-                        <span *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass" [ngClass]="getIconClasses(button)"></span>
+                        [class.k-selected]="button.selected"
+                    >
+                        <kendo-icon-wrapper
+                            *ngIf="button.overflowOptions.icon || button.overflowOptions.iconClass || button.overflowOptions.svgIcon"
+                            [name]="button.overflowOptions.icon"
+                            [customFontClass]="button.overflowOptions.iconClass"
+                            [svgIcon]="button.overflowOptions.svgIcon"
+                        ></kendo-icon-wrapper>
                         <span *ngIf="button.overflowOptions.text" class="k-menu-link-text">{{button.overflowOptions.text}}</span>
                     </span>
                 </div>
@@ -2109,12 +2157,14 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._popupSettings = { animate: true, popupClass: '' };
@@ -2247,27 +2297,6 @@ class ToolBarDropDownButtonComponent extends ToolBarToolComponent {
             return !isUnmodified(this.focusedIndex);
         }
     }
-    /**
-     * @hidden
-     */
-    getIconClasses(item) {
-        if (item) {
-            if (item.icon) {
-                return `k-icon k-i-${item.icon}`;
-            }
-            else if (item.iconClass) {
-                return item.iconClass;
-            }
-        }
-        else {
-            if (this.overflowOptions.icon) {
-                return `k-icon k-i-${this.overflowOptions.icon}`;
-            }
-            else if (this.overflowOptions.iconClass) {
-                return this.overflowOptions.iconClass;
-            }
-        }
-    }
     /**
      * @hidden
      */
@@ -2306,6 +2335,7 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
@@ -2329,8 +2359,14 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 class="k-item k-menu-item k-disabled"
                 [ngClass]="buttonClass">
                 <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
-                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
@@ -2342,14 +2378,20 @@ ToolBarDropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
                 [class.k-disabled]="disabled || item.disabled"
                 (click)="handleClick($event, item, i)">
                 <span
-                    class="k-link k-menu-link">
-                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    class="k-link k-menu-link"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="item.icon || item.iconClass || item.svgIcon"
+                        [name]="item.icon"
+                        [customFontClass]="item.iconClass"
+                        [svgIcon]="item.svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
                 </span>
             </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: ["icon", "svgIcon", "iconClass", "imageUrl", "textField", "data", "size", "rounded", "fillMode", "themeColor"], outputs: ["itemClick", "focus", "blur"], exportAs: ["kendoDropDownButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarDropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2363,6 +2405,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 class="k-toolbar-menu-button"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [disabled]="disabled"
@@ -2386,8 +2429,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 class="k-item k-menu-item k-disabled"
                 [ngClass]="buttonClass">
                 <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
-                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
@@ -2399,8 +2448,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [class.k-disabled]="disabled || item.disabled"
                 (click)="handleClick($event, item, i)">
                 <span
-                    class="k-link k-menu-link">
-                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    class="k-link k-menu-link"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="item.icon || item.iconClass || item.svgIcon"
+                        [name]="item.icon"
+                        [customFontClass]="item.iconClass"
+                        [svgIcon]="item.svgIcon"
+                    ></kendo-icon-wrapper>
                     <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
                 </span>
             </div>
@@ -2536,12 +2591,14 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this.overflowOptions = {
             text: '',
             icon: '',
             iconClass: '',
+            svgIcon: null,
             imageUrl: ''
         };
         this._popupSettings = { animate: true, popupClass: '' };
@@ -2676,27 +2733,6 @@ class ToolBarSplitButtonComponent extends ToolBarToolComponent {
             return !isUnmodified(this.focusedIndex);
         }
     }
-    /**
-     * @hidden
-     */
-    getIconClasses(item) {
-        if (item) {
-            if (item.icon) {
-                return `k-icon k-i-${item.icon}`;
-            }
-            else if (item.iconClass) {
-                return item.iconClass;
-            }
-        }
-        else {
-            if (this.overflowOptions.icon) {
-                return `k-icon k-i-${this.overflowOptions.icon}`;
-            }
-            else if (this.overflowOptions.iconClass) {
-                return this.overflowOptions.iconClass;
-            }
-        }
-    }
     /**
      * @hidden
      */
@@ -2737,6 +2773,7 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [text]="toolbarOptions.text"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
@@ -2763,8 +2800,15 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [ngClass]="buttonClass"
                 (click)="onMainButtonClick($event)">
                 <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
-                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    >
+                    </kendo-icon-wrapper>
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
@@ -2776,14 +2820,21 @@ ToolBarSplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
                 [class.k-disabled]="disabled || item.disabled"
                 (click)="handleClick($event, item, i)">
                 <span
-                    class="k-link k-menu-link">
-                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    class="k-link k-menu-link"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="item.icon || item.iconClass || item.svgIcon"
+                        [name]="item.icon"
+                        [customFontClass]="item.iconClass"
+                        [svgIcon]="item.svgIcon"
+                    >
+                    </kendo-icon-wrapper>
                     <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
                 </span>
             </div>
             </ng-container>
         </ng-template>
-    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$1.SplitButtonComponent, selector: "kendo-splitbutton", inputs: ["text", "icon", "svgIcon", "iconClass", "type", "imageUrl", "size", "rounded", "fillMode", "themeColor", "disabled", "popupSettings", "tabIndex", "textField", "data", "buttonClass", "arrowButtonClass", "arrowButtonIcon", "arrowButtonSvgIcon"], outputs: ["buttonClick", "itemClick", "focus", "blur", "open", "close"], exportAs: ["kendoSplitButton"] }, { type: i2$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarSplitButtonComponent, decorators: [{
             type: Component,
             args: [{
@@ -2799,6 +2850,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [text]="toolbarOptions.text"
                 [icon]="toolbarOptions.icon"
                 [iconClass]="toolbarOptions.iconClass"
+                [svgIcon]="toolbarOptions.svgIcon"
                 [imageUrl]="toolbarOptions.imageUrl"
                 [buttonClass]="buttonClass"
                 [arrowButtonClass]="arrowButtonClass"
@@ -2825,8 +2877,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [ngClass]="buttonClass"
                 (click)="onMainButtonClick($event)">
                 <span
-                    [ngClass]="{'k-link': true, 'k-menu-link': true}">
-                    <span *ngIf="overflowOptions.icon || overflowOptions.iconClass" [ngClass]="getIconClasses()"></span>
+                    [ngClass]="{'k-link': true, 'k-menu-link': true}"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="overflowOptions.icon || overflowOptions.iconClass || overflowOptions.svgIcon"
+                        [name]="overflowOptions.icon"
+                        [customFontClass]="overflowOptions.iconClass"
+                        [svgIcon]="overflowOptions.svgIcon"
+                    >
+                    </kendo-icon-wrapper>
                     <span *ngIf="overflowOptions.text" class="k-menu-link-text">{{overflowOptions.text}}</span>
                 </span>
             </div>
@@ -2838,8 +2897,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 [class.k-disabled]="disabled || item.disabled"
                 (click)="handleClick($event, item, i)">
                 <span
-                    class="k-link k-menu-link">
-                    <span *ngIf="item.icon || item.iconClass" [ngClass]="getIconClasses(item)"></span>
+                    class="k-link k-menu-link"
+                >
+                    <kendo-icon-wrapper
+                        *ngIf="item.icon || item.iconClass || item.svgIcon"
+                        [name]="item.icon"
+                        [customFontClass]="item.iconClass"
+                        [svgIcon]="item.svgIcon"
+                    >
+                    </kendo-icon-wrapper>
                     <span *ngIf="getText(item)" class="k-menu-link-text">{{ getText(item) }}</span>
                 </span>
             </div>
@@ -3070,6 +3136,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
             [disabled]="disabled || item.disabled"
             [icon]="item.icon"
             [iconClass]="item.iconClass"
+            [svgIcon]="item.svgIcon"
             [imageUrl]="item.imageUrl"
             [fillMode]="fillMode"
             [themeColor]="fillMode ? themeColor : null"
@@ -3077,7 +3144,7 @@ ToolBarButtonListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0
         >
             {{ getText(item) }}
         </button>
-    `, isInline: true, components: [{ type: i1$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"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+    `, isInline: true, components: [{ type: i1$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"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarButtonListComponent, decorators: [{
             type: Component,
             args: [{
@@ -3094,6 +3161,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [disabled]="disabled || item.disabled"
             [icon]="item.icon"
             [iconClass]="item.iconClass"
+            [svgIcon]="item.svgIcon"
             [imageUrl]="item.imageUrl"
             [fillMode]="fillMode"
             [themeColor]="fillMode ? themeColor : null"
@@ -3192,20 +3260,20 @@ ToolBarModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         ToolBarSpacerComponent, ToolBarRendererComponent,
         ToolBarButtonListComponent,
         ToolbarCustomMessagesComponent,
-        LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule], exports: [ToolBarComponent, ToolBarToolComponent,
+        LocalizedToolbarMessagesDirective], imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule, IconsModule], exports: [ToolBarComponent, ToolBarToolComponent,
         ToolBarButtonComponent,
         ToolBarButtonGroupComponent,
         ToolBarDropDownButtonComponent,
         ToolBarSplitButtonComponent,
         ToolBarSeparatorComponent,
         ToolBarSpacerComponent, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective] });
-ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]] });
+ToolBarModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, imports: [[CommonModule, ButtonsModule, PopupModule, ResizeSensorModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ToolBarModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ToolBarComponent, TOOLBAR_TOOLS, TOOLBAR_COMMON],
                     exports: [ToolBarComponent, TOOLBAR_TOOLS, ToolbarCustomMessagesComponent, LocalizedToolbarMessagesDirective],
-                    imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule]
+                    imports: [CommonModule, ButtonsModule, PopupModule, ResizeSensorModule, IconsModule]
                 }]
         }] });