@progress/kendo-angular-buttons 8.2.2 → 11.0.0-develop.79

package/{fesm2015/kendo-angular-buttons.js → fesm2020/progress-kendo-angular-buttons.mjs}

@@ -1,24 +1,45 @@
 /**-----------------------------------------------------------------------------------------
-* Copyright © 2021 Progress Software Corporation. All rights reserved.
+* Copyright © 2022 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Directive, Optional, Input, Output, HostBinding, HostListener, isDevMode, Component, ContentChildren, NgModule, InjectionToken, Inject, forwardRef, ElementRef, ViewContainerRef, ContentChild, ViewChild } from '@angular/core';
-import * as i8 from '@progress/kendo-angular-common';
-import { isDocumentAvailable, Keys, isChanged, hasObservers, guid, EventsModule } from '@progress/kendo-angular-common';
+import { Injectable, EventEmitter, isDevMode, Component, Optional, Input, Output, HostBinding, HostListener, ContentChildren, NgModule, Directive, InjectionToken, Inject, forwardRef, ElementRef, ViewContainerRef, ContentChild, ViewChild } from '@angular/core';
+import { Subject, Subscription, fromEvent, merge } from 'rxjs';
+import * as i9 from '@progress/kendo-angular-common';
+import { isDocumentAvailable, Keys, isChanged, hasObservers, guid, anyChanged, EventsModule } from '@progress/kendo-angular-common';
 import * as i1 from '@progress/kendo-angular-l10n';
 import { LocalizationService, L10N_PREFIX, ComponentMessages } from '@progress/kendo-angular-l10n';
-import { Subject, Subscription, fromEvent, merge } from 'rxjs';
-import { take, filter, tap } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
 import { detectDesktopBrowser, detectMobileOS } from '@progress/kendo-common';
-import * as i2 from '@angular/common';
+import * as i2 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import * as i3 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3 from '@progress/kendo-angular-popup';
+import { filter, tap, take } from 'rxjs/operators';
+import * as i3$1 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
+import { arrowDownIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 import * as i4 from '@angular/animations';
 import { sequence, query, style, stagger, animate } from '@angular/animations';
 
+/**
+ * @hidden
+ */
+class KendoButtonService {
+    constructor() {
+        this.buttonClicked = new Subject();
+        this.buttonClicked$ = this.buttonClicked.asObservable();
+    }
+    click(button) {
+        this.buttonClicked.next(button);
+    }
+}
+KendoButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+KendoButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KendoButtonService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: KendoButtonService, decorators: [{
+            type: Injectable
+        }] });
+
 /**
  * @hidden
  */
@@ -26,9 +47,9 @@ const packageMetadata = {
     name: '@progress/kendo-angular-buttons',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1668698044,
+    publishDate: 1672320727,
     version: '',
-    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/?utm_medium=product&utm_source=kendoangular&utm_campaign=kendo-ui-angular-purchase-license-keys-warning'
+    licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
 /**
@@ -133,33 +154,16 @@ const isFirefox = (userAgent) => {
     return (desktopBrowser && desktopBrowser.mozilla) || (mobileOS && mobileOS.browser === 'firefox');
 };
 
-/**
- * @hidden
- */
-class KendoButtonService {
-    constructor() {
-        this.buttonClicked = new Subject();
-        this.buttonClicked$ = this.buttonClicked.asObservable();
-    }
-    click(button) {
-        this.buttonClicked.next(button);
-    }
-}
-KendoButtonService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-KendoButtonService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: KendoButtonService, decorators: [{
-            type: Injectable
-        }] });
-
 const SPAN_TAG_NAME = 'SPAN';
-const DEFAULT_ROUNDED$2 = 'medium';
-const DEFAULT_SIZE$1 = 'medium';
-const DEFAULT_THEME_COLOR$1 = 'base';
-const DEFAULT_FILL_MODE$2 = 'solid';
+const KENDO_BUTTON_TAG_NAME = 'KENDO-BUTTON';
+const DEFAULT_ROUNDED$3 = 'medium';
+const DEFAULT_SIZE$2 = 'medium';
+const DEFAULT_THEME_COLOR$2 = 'base';
+const DEFAULT_FILL_MODE$3 = 'solid';
 /**
  * Represents the Kendo UI Button component for Angular.
  */
-class ButtonDirective {
+class ButtonComponent {
     constructor(element, renderer, service, localization, ngZone) {
         this.renderer = renderer;
         this.service = service;
@@ -184,12 +188,10 @@ class ButtonDirective {
          */
         this.click = new EventEmitter();
         this.isDisabled = false;
-        this.isIcon = false;
-        this.isIconClass = false;
-        this._size = DEFAULT_SIZE$1;
-        this._rounded = DEFAULT_ROUNDED$2;
-        this._fillMode = DEFAULT_FILL_MODE$2;
-        this._themeColor = DEFAULT_THEME_COLOR$1;
+        this._size = DEFAULT_SIZE$2;
+        this._rounded = DEFAULT_ROUNDED$3;
+        this._fillMode = DEFAULT_FILL_MODE$3;
+        this._themeColor = DEFAULT_THEME_COLOR$2;
         this._focused = false;
         this.subs = new Subscription();
         validatePackage(packageMetadata);
@@ -229,51 +231,31 @@ class ButtonDirective {
     get tabIndex() {
         return this.element.tabIndex;
     }
-    /**
-     * Defines the name for an existing icon in a Kendo UI theme.
-     * The icon is rendered inside the Button by a `span.k-icon` element.
-     */
-    set icon(icon) {
-        if (icon) {
-            this.iconSetter(icon, () => {
-                this.isIcon = true;
-                const classes = 'k-button-icon k-icon k-i-' + icon;
-                this.addIcon(classes);
-            });
-        }
-        else {
-            this.isIcon = false;
-            this.updateIconNode();
-        }
-    }
     /**
      * Defines a CSS class—or multiple classes separated by spaces—
      * which are applied to a `span` element inside the Button. Allows the usage of custom icons.
      */
-    set iconClass(iconClassName) {
-        if (iconClassName) {
-            this.iconSetter(iconClassName, () => {
-                this.isIconClass = true;
-                const classes = 'k-button-icon ' + iconClassName;
-                this.addIcon(classes);
-            });
-        }
-        else {
-            this.isIconClass = false;
-            this.updateIconNode();
+    set iconClass(value) {
+        if (isDevMode() && value && (this.icon || this.svgIcon)) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
+        this._iconClass = value;
+    }
+    get iconClass() {
+        return this._iconClass;
     }
     /**
-     * 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.
+     * Defines the name for an existing font icon in the Kendo UI theme.
      */
-    set imageUrl(imageUrl) {
-        if (imageUrl) {
-            this.iconSetter(imageUrl, this.addImgIcon.bind(this));
-        }
-        else {
-            this.removeImageNode();
+    set icon(name) {
+        if (isDevMode() && name && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
         }
+        this._icon = name;
+    }
+    ;
+    get icon() {
+        return this._icon;
     }
     /**
      * If set to `true`, it disables the Button.
@@ -300,7 +282,7 @@ class ButtonDirective {
      * * `none`
      */
     set size(size) {
-        const newSize = size ? size : DEFAULT_SIZE$1;
+        const newSize = size ? size : DEFAULT_SIZE$2;
         this.handleClasses(newSize, 'size');
         this._size = newSize;
     }
@@ -319,7 +301,7 @@ class ButtonDirective {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$3;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -339,7 +321,7 @@ class ButtonDirective {
      * * `none`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$3;
         this.handleClasses(newFillMode, 'fillMode');
         this._fillMode = newFillMode;
     }
@@ -366,13 +348,25 @@ class ButtonDirective {
      * * `none`
      */
     set themeColor(themeColor) {
-        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR$1;
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR$2;
         this.handleThemeColor(newThemeColor);
         this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
     }
+    /**
+     * Defines an SVGIcon to be rendered within the button.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.iconClass) {
+            throw new Error('Setting both icon/svgIcon and iconClass options at the same time is not supported.');
+        }
+        this._svgIcon = icon;
+    }
+    get svgIcon() {
+        return this._svgIcon;
+    }
     set isFocused(isFocused) {
         this.toggleClass('k-focus', isFocused);
         this._focused = isFocused;
@@ -386,6 +380,10 @@ class ButtonDirective {
     get isToggleable() {
         return this.toggleable;
     }
+    get iconButtonClass() {
+        const hasIcon = this.icon || this.iconClass || this.imageUrl || this.svgIcon;
+        return hasIcon && !this.hasText;
+    }
     get roleSetter() {
         return this.role;
     }
@@ -430,8 +428,8 @@ class ButtonDirective {
         }
     }
     ngOnInit() {
-        const isSpan = this.element.tagName === SPAN_TAG_NAME;
-        this.addTextSpan();
+        const elementTagName = this.element.tagName;
+        const isSpanOrKendoButton = elementTagName === SPAN_TAG_NAME || elementTagName === KENDO_BUTTON_TAG_NAME;
         if (!this.element.hasAttribute('role') && this.togglable) {
             this.toggleAriaPressed(this.toggleable);
         }
@@ -442,7 +440,7 @@ class ButtonDirective {
             this.subs.add(this.renderer.listen(this.element, 'click', this._onButtonClick.bind(this)));
             this.subs.add(this.renderer.listen(this.element, 'keydown', (event) => {
                 const isSpaceOrEnter = event.keyCode === Keys.Space || event.keyCode === Keys.Enter;
-                if (isSpan && isSpaceOrEnter) {
+                if (isSpanOrKendoButton && isSpaceOrEnter) {
                     this.click.emit(event);
                     this._onButtonClick();
                 }
@@ -460,15 +458,14 @@ class ButtonDirective {
             this.handleClasses(this[input], input);
         });
     }
-    ngAfterViewChecked() {
-        this.setIconTextClasses();
-    }
     ngOnDestroy() {
-        this.imageNode = null;
-        this.iconNode = null;
-        this.iconSpanNode = null;
         this.subs.unsubscribe();
-        clearTimeout(this.deferTimeout);
+    }
+    /**
+     * @hidden
+     */
+    get hasText() {
+        return isDocumentAvailable() && this.element.textContent.trim().length > 0;
     }
     /**
      * Focuses the Button component.
@@ -527,95 +524,6 @@ class ButtonDirective {
             this.removeAttribute('aria-pressed');
         }
     }
-    hasText() {
-        return isDocumentAvailable() && this.element.textContent.trim().length > 0;
-    }
-    addImgIcon(imageUrl) {
-        let renderer = this.renderer;
-        if (!this.iconSpanNode) {
-            this.iconSpanNode = renderer.createElement('span');
-            renderer.setProperty(this.iconSpanNode, 'className', 'k-button-icon k-icon');
-        }
-        if (this.imageNode) {
-            renderer.setProperty(this.imageNode, 'src', imageUrl);
-        }
-        else if (isDocumentAvailable()) {
-            this.imageNode = renderer.createElement('img');
-            renderer.setProperty(this.imageNode, 'src', imageUrl);
-            renderer.setProperty(this.imageNode, 'className', 'k-image');
-            renderer.setAttribute(this.imageNode, 'role', 'presentation');
-        }
-        this.iconSpanNode.appendChild(this.imageNode);
-        this.prependChild(this.iconSpanNode);
-    }
-    addIcon(classNames) {
-        let renderer = this.renderer;
-        if (this.iconNode) {
-            renderer.setProperty(this.iconNode, 'className', classNames);
-        }
-        else if (isDocumentAvailable()) {
-            this.iconNode = renderer.createElement('span');
-            renderer.setProperty(this.iconNode, 'className', classNames);
-            renderer.setAttribute(this.iconNode, 'role', 'presentation');
-            this.prependChild(this.iconNode);
-        }
-    }
-    addTextSpan() {
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            if (isDocumentAvailable() && this.hasText()) {
-                const span = this.renderer.createElement('span');
-                this.renderer.addClass(span, 'k-button-text');
-                const buttonContentNodes = Array.from(this.element.childNodes);
-                buttonContentNodes.forEach(node => this.renderer.appendChild(span, node));
-                this.renderer.appendChild(this.element, span);
-            }
-        });
-    }
-    prependChild(node) {
-        this.defer(() => {
-            if (this.renderer && node !== this.element.firstChild) {
-                this.renderer.insertBefore(this.element, node, this.element.firstChild);
-            }
-        });
-    }
-    defer(callback) {
-        this.ngZone.runOutsideAngular(() => {
-            this.deferTimeout = setTimeout(callback, 0);
-        });
-    }
-    iconSetter(icon, insertIcon) {
-        if (icon) {
-            insertIcon(icon);
-        }
-        this.setIconTextClasses();
-    }
-    removeImageNode() {
-        if (this.imageNode && this.renderer.parentNode(this.imageNode)) {
-            this.renderer.removeChild(this.element, this.imageNode);
-            this.renderer.removeChild(this.element, this.iconSpanNode);
-            this.imageNode = null;
-            this.iconSpanNode = null;
-        }
-    }
-    removeIconNode() {
-        if (this.iconNode && this.renderer.parentNode(this.iconNode)) {
-            this.renderer.removeChild(this.element, this.iconNode);
-            this.iconNode = null;
-        }
-        if (this.iconSpanNode) {
-            this.renderer.removeChild(this.element, this.iconSpanNode);
-            this.iconSpanNode = null;
-        }
-    }
-    updateIconNode() {
-        if (!this.isIcon && !this.isIconClass) {
-            this.removeIconNode();
-        }
-    }
-    setIconTextClasses() {
-        const hasIcon = this.isIcon || this.isIconClass || this.imageNode;
-        this.toggleClass('k-icon-button', hasIcon && !this.hasText());
-    }
     toggleClass(className, add) {
         if (add) {
             this.renderer.addClass(this.element, className);
@@ -660,16 +568,27 @@ class ButtonDirective {
         }
     }
 }
-ButtonDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-ButtonDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: { toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: KendoButtonService, optional: true }, { token: i1.LocalizationService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonComponent, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: { toggleable: "toggleable", togglable: "togglable", selected: "selected", tabIndex: "tabIndex", imageUrl: "imageUrl", iconClass: "iconClass", icon: "icon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", svgIcon: "svgIcon", role: "role", primary: "primary", look: "look" }, outputs: { selectedChange: "selectedChange", click: "click" }, host: { listeners: { "focus": "onFocus()", "blur": "onBlur()" }, properties: { "class.k-button": "this.classButton", "class.k-toggle-button": "this.isToggleable", "class.k-icon-button": "this.iconButtonClass", "attr.role": "this.roleSetter", "attr.aria-disabled": "this.classDisabled", "class.k-disabled": "this.classDisabled", "class.k-selected": "this.classActive", "attr.dir": "this.getDirection" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.button'
         }
-    ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonDirective, decorators: [{
-            type: Directive,
+    ], exportAs: ["kendoButton"], usesOnChanges: true, ngImport: i0, template: `
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-button-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+            <img [src]="imageUrl" class="k-image" role="presentation" />
+        </span>
+        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+        <span class="k-button-text"><ng-content></ng-content></span>
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: ButtonComponent, decorators: [{
+            type: Component,
             args: [{
                     exportAs: 'kendoButton',
                     providers: [
@@ -679,7 +598,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                             useValue: 'kendo.button'
                         }
                     ],
-                    selector: 'button[kendoButton], span[kendoButton]' // eslint-disable-line
+                    selector: 'button[kendoButton], span[kendoButton], kendo-button',
+                    template: `
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-button-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
+        <span *ngIf="imageUrl" class="k-button-icon k-icon">
+            <img [src]="imageUrl" class="k-image" role="presentation" />
+        </span>
+        <span *ngIf="iconClass" class="k-button-icon" [ngClass]="iconClass"></span>
+        <span class="k-button-text"><ng-content></ng-content></span>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: KendoButtonService, decorators: [{
                     type: Optional
@@ -691,11 +622,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], tabIndex: [{
                 type: Input
-            }], icon: [{
+            }], imageUrl: [{
                 type: Input
             }], iconClass: [{
                 type: Input
-            }], imageUrl: [{
+            }], icon: [{
                 type: Input
             }], disabled: [{
                 type: Input
@@ -707,6 +638,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], themeColor: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], role: [{
                 type: Input
             }], selectedChange: [{
@@ -719,6 +652,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             }], isToggleable: [{
                 type: HostBinding,
                 args: ['class.k-toggle-button']
+            }], iconButtonClass: [{
+                type: HostBinding,
+                args: ['class.k-icon-button']
             }], roleSetter: [{
                 type: HostBinding,
                 args: ['attr.role']
@@ -887,7 +823,7 @@ class ButtonGroupComponent {
             });
         }
         if (isChanged('navigable', changes)) {
-            if (changes.navigable.currentValue) {
+            if (changes['navigable'].currentValue) {
                 this.setButtonsTabIndex();
                 this.currentTabIndex = 0;
             }
@@ -916,7 +852,7 @@ class ButtonGroupComponent {
         this.verifySettings();
     }
     navigateFocus(event) {
-        let focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
+        const focusedIndex = this.buttons.toArray().findIndex(current => current.element.tabIndex !== -1);
         const firstIndex = 0;
         const lastIndex = this.buttons.length - 1;
         const eventArgs = new PreventableEvent();
@@ -993,18 +929,18 @@ class ButtonGroupComponent {
             .subscribe(handler));
     }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: KendoButtonService }, { token: i1.LocalizationService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ButtonGroupComponent, selector: "kendo-buttongroup", inputs: { disabled: "disabled", selection: "selection", width: "width", tabIndex: "tabIndex", navigable: "navigable" }, outputs: { navigate: "navigate" }, host: { properties: { "class.k-button-group": "this.wrapperClass", "class.k-disabled": "this.disabledClass", "class.k-button-group-stretched": "this.stretchedClass", "attr.role": "this.role", "attr.dir": "this.dir", "attr.aria-disabled": "this.ariaDisabled", "style.width": "this.wrapperWidth", "attr.tabindex": "this.wrapperTabIndex" } }, providers: [
         KendoButtonService,
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.buttongroup'
         }
-    ], queries: [{ propertyName: "buttons", predicate: ButtonDirective }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "buttons", predicate: ButtonComponent }], exportAs: ["kendoButtonGroup"], usesOnChanges: true, ngImport: i0, template: `
         <ng-content select="[kendoButton]"></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoButtonGroup',
@@ -1038,7 +974,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Output
             }], buttons: [{
                 type: ContentChildren,
-                args: [ButtonDirective]
+                args: [ButtonComponent]
             }], wrapperClass: [{
                 type: HostBinding,
                 args: ['class.k-button-group']
@@ -1098,14 +1034,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class ButtonModule {
 }
-ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, declarations: [ButtonDirective], exports: [ButtonDirective] });
-ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonModule, decorators: [{
+ButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, declarations: [ButtonComponent], imports: [IconsModule], exports: [ButtonComponent] });
+ButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, imports: [[IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [ButtonDirective],
-                    exports: [ButtonDirective]
+                    declarations: [ButtonComponent],
+                    imports: [IconsModule],
+                    exports: [ButtonComponent]
                 }]
         }] });
 
@@ -1119,10 +1056,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class ButtonGroupModule {
 }
-ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [CommonModule, ButtonModule], exports: [ButtonGroupComponent] });
-ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, imports: [[CommonModule, ButtonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonGroupModule, decorators: [{
+ButtonGroupModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonGroupModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, declarations: [ButtonGroupComponent], imports: [CommonModule, ButtonModule], exports: [ButtonGroupComponent] });
+ButtonGroupModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, imports: [[CommonModule, ButtonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonGroupModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ButtonGroupComponent],
@@ -1131,6 +1068,68 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+/**
+ * Used for rendering the list item content.
+ *
+ * To define the item template, nest a `<ng-template>` tag with the `kendo<ComponentName>ItemTemplate` directive inside the component tag.
+ *
+ * For the DropDownButton, use the `kendoDropDownButtonItemTemplate` directive.
+ * For the SplitButton, use the `kendoSplitButtonItemTemplate` directive.
+ *
+ * The template context is set to the current component. To get a reference to the current data item, use the `let-dataItem` directive.
+ *
+ * @example
+ * ```ts
+ * _@Component({
+ * selector: 'my-app',
+ * template: `
+ *  <kendo-splitbutton [data]="listItems">
+ *    <ng-template kendoSplitButtonItemTemplate let-dataItem>
+ *      <span>{{dataItem}} option</span>
+ *    </ng-template>
+ *  </kendo-splitbutton>
+ *  <kendo-dropdownbutton [data]="listItems">
+ *    <ng-template kendoDropDownButtonItemTemplate let-dataItem>
+ *      <span>{{dataItem}} option</span>
+ *    </ng-template>
+ *  </kendo-dropdownbutton>
+ * `
+ * })
+ * class AppComponent {
+ *   public listItems: Array<any> = [{
+ *      text: 'item1',
+ *      icon: 'arrow-rotate-cw',
+ *      disabled: false,
+ *      click: (dataItem: any) => {
+ *          //action
+ *      }
+ *  }, {
+ *      text: 'item2',
+ *      icon: 'arrow-rotate-cw',
+ *      disabled: false,
+ *      click: (dataItem: any) => {
+ *          //action
+ *      }
+ *  }]
+ * }
+ * ```
+ *
+ * For more examples, refer to the article on the [DropDownList templates]({% slug overview_ddl %}#templates).
+ */
+class ButtonItemTemplateDirective {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+    }
+}
+ButtonItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
+ButtonItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
+
 /**
  * @hidden
  */
@@ -1159,9 +1158,9 @@ class FocusService {
         this.onFocus.emit(index);
     }
 }
-FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-FocusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusService, decorators: [{
+FocusService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+FocusService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusService, decorators: [{
             type: Injectable
         }] });
 
@@ -1205,9 +1204,9 @@ class FocusableDirective {
         }));
     }
 }
-FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FocusableDirective, decorators: [{
+FocusableDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusableDirective, deps: [{ token: FocusService }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+FocusableDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: { index: "index" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FocusableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoButtonFocusable]'
@@ -1233,9 +1232,9 @@ class TemplateContextDirective {
         }
     }
 }
-TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: TemplateContextDirective, decorators: [{
+TemplateContextDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplateContextDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+TemplateContextDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: TemplateContextDirective, selector: "[templateContext]", inputs: { templateContext: "templateContext" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TemplateContextDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -1282,8 +1281,8 @@ class ListComponent {
         this.onItemBlur.emit();
     }
 }
-ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListComponent, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
+ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ListComponent, selector: "kendo-button-list", inputs: { data: "data", textField: "textField", itemTemplate: "itemTemplate", size: "size" }, outputs: { onItemClick: "onItemClick", onItemBlur: "onItemBlur" }, ngImport: i0, template: `
         <ul class="k-group k-menu-group k-reset" [ngClass]="sizeClass" unselectable="on" role="menu">
             <li role="menuitem"
                 unselectable="on"
@@ -1319,8 +1318,8 @@ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
                 </ng-template>
             </li>
         </ul>
-      `, isInline: true, directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListComponent, decorators: [{
+      `, isInline: true, directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-button-list',
@@ -1376,68 +1375,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }] } });
 
-/**
- * Used for rendering the list item content.
- *
- * To define the item template, nest a `<ng-template>` tag with the `kendo<ComponentName>ItemTemplate` directive inside the component tag.
- *
- * For the DropDownButton, use the `kendoDropDownButtonItemTemplate` directive.
- * For the SplitButton, use the `kendoSplitButtonItemTemplate` directive.
- *
- * The template context is set to the current component. To get a reference to the current data item, use the `let-dataItem` directive.
- *
- * @example
- * ```ts
- * _@Component({
- * selector: 'my-app',
- * template: `
- *  <kendo-splitbutton [data]="listItems">
- *    <ng-template kendoSplitButtonItemTemplate let-dataItem>
- *      <span>{{dataItem}} option</span>
- *    </ng-template>
- *  </kendo-splitbutton>
- *  <kendo-dropdownbutton [data]="listItems">
- *    <ng-template kendoDropDownButtonItemTemplate let-dataItem>
- *      <span>{{dataItem}} option</span>
- *    </ng-template>
- *  </kendo-dropdownbutton>
- * `
- * })
- * class AppComponent {
- *   public listItems: Array<any> = [{
- *      text: 'item1',
- *      icon: 'arrow-rotate-cw',
- *      disabled: false,
- *      click: (dataItem: any) => {
- *          //action
- *      }
- *  }, {
- *      text: 'item2',
- *      icon: 'arrow-rotate-cw',
- *      disabled: false,
- *      click: (dataItem: any) => {
- *          //action
- *      }
- *  }]
- * }
- * ```
- *
- * For more examples, refer to the article on the [DropDownList templates]({% slug overview_ddl %}#templates).
- */
-class ButtonItemTemplateDirective {
-    constructor(templateRef) {
-        this.templateRef = templateRef;
-    }
-}
-ButtonItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonItemTemplateDirective, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive });
-ButtonItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: ButtonItemTemplateDirective, selector: "[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonItemTemplateDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[kendoDropDownButtonItemTemplate],[kendoSplitButtonItemTemplate]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }]; } });
-
 const EXPORTED_DIRECTIVES = [
     ListComponent,
     FocusableDirective,
@@ -1449,16 +1386,16 @@ const EXPORTED_DIRECTIVES = [
  */
 class ListModule {
 }
-ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, declarations: [ListComponent,
+ListModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ListModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, declarations: [ListComponent,
         FocusableDirective,
         ButtonItemTemplateDirective,
         TemplateContextDirective], imports: [CommonModule], exports: [ListComponent,
         FocusableDirective,
         ButtonItemTemplateDirective,
         TemplateContextDirective] });
-ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListModule, decorators: [{
+ListModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, imports: [[CommonModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [EXPORTED_DIRECTIVES],
@@ -1590,9 +1527,9 @@ class NavigationService {
         }
     }
 }
-NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
-NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: NavigationService, decorators: [{
+NavigationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, deps: [{ token: NAVIGATION_CONFIG }], target: i0.ɵɵFactoryTarget.Injectable });
+NavigationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationService, decorators: [{
             type: Injectable
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
@@ -1604,9 +1541,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class PopupContainerService {
 }
-PopupContainerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PopupContainerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupContainerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: PopupContainerService, decorators: [{
+PopupContainerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopupContainerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PopupContainerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopupContainerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PopupContainerService, decorators: [{
             type: Injectable
         }] });
 
@@ -1697,7 +1634,7 @@ class ListButton {
      * @hidden
      */
     get anchorAlign() {
-        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
+        const align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
         if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
@@ -1707,7 +1644,7 @@ class ListButton {
      * @hidden
      */
     get popupAlign() {
-        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
+        const align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
         if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
@@ -1716,7 +1653,7 @@ class ListButton {
     ngOnChanges(changes) {
         if (isChanged("popupSettings", changes) && isPresent(this.popupRef)) {
             const popup = this.popupRef.popup.instance;
-            const newSettings = changes.popupSettings.currentValue;
+            const newSettings = changes['popupSettings'].currentValue;
             popup.popupClass = newSettings.popupClass;
             popup.animate = newSettings.animate;
             popup.popupAlign = this.popupAlign;
@@ -1841,7 +1778,7 @@ class ListButton {
         if (!isHost) {
             eventData.stopImmediatePropagation();
         }
-        let focused = this.focusService.focused || 0;
+        const focused = this.focusService.focused || 0;
         const action = this.navigationService.process({
             altKey: eventData.altKey,
             current: focused,
@@ -1904,7 +1841,7 @@ class ListButton {
             this._active = false;
         }
         if (this.openState) {
-            let focused = this.focusService.focused;
+            const focused = this.focusService.focused;
             if (isPresent(focused) && focused !== -1) {
                 this.emitItemClickHandler(focused);
             }
@@ -1972,14 +1909,14 @@ class ListButton {
         }
     }
 }
-ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-ListButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ListButton, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ListButton, decorators: [{
+ListButton.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListButton, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+ListButton.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ListButton, selector: "ng-component", inputs: { disabled: "disabled", tabIndex: "tabIndex", buttonClass: "buttonClass", popupSettings: "popupSettings" }, outputs: { open: "open", close: "close" }, usesOnChanges: true, ngImport: i0, template: '', isInline: true });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ListButton, decorators: [{
             type: Component,
             args: [{
                     template: ''
                 }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }]; }, propDecorators: { disabled: [{
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3$1.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }]; }, propDecorators: { disabled: [{
                 type: Input
             }], tabIndex: [{
                 type: Input
@@ -1998,9 +1935,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class Messages extends ComponentMessages {
 }
-Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: Messages, decorators: [{
+Messages.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+Messages.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: Messages, selector: "kendo-splitbutton-messages-base", inputs: { splitButtonLabel: "splitButtonLabel" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: Messages, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -2019,14 +1956,14 @@ class LocalizedSplitButtonMessagesDirective extends Messages {
         this.service = service;
     }
 }
-LocalizedSplitButtonMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
-LocalizedSplitButtonMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
+LocalizedSplitButtonMessagesDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Directive });
+LocalizedSplitButtonMessagesDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]", providers: [
         {
             provide: Messages,
             useExisting: forwardRef(() => LocalizedSplitButtonMessagesDirective)
         }
     ], usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: LocalizedSplitButtonMessagesDirective, decorators: [{
             type: Directive,
             args: [{
                     providers: [
@@ -2046,8 +1983,8 @@ const NAVIGATION_SETTINGS_PROVIDER$2 = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS$2
 };
-const DEFAULT_ROUNDED$1 = 'medium';
-const DEFAULT_FILL_MODE$1 = 'solid';
+const DEFAULT_ROUNDED$2 = 'medium';
+const DEFAULT_FILL_MODE$2 = 'solid';
 /**
  * Represents the Kendo UI SplitButton component for Angular.
  *
@@ -2099,15 +2036,10 @@ class SplitButtonComponent extends ListButton {
          */
         this.text = '';
         /**
-         * Defines an icon to be rendered next to the button text
+         * Defines an icon to be rendered next to the button text.
          * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
          */
         this.icon = '';
-        /**
-         * Defines an icon with a custom CSS class to be rendered next to the button text
-         * ([see example]({% slug databinding_splitbutton %}#toc-arrays-of-complex-data)).
-         */
-        this.iconClass = '';
         /**
          * Defines the type attribute of the main button
          */
@@ -2157,6 +2089,11 @@ class SplitButtonComponent extends ListButton {
          * be rendered for the button which opens the popup.
          */
         this.arrowButtonIcon = 'caret-alt-down';
+        /**
+         * Specifies the [`SVGIcon`](slug:api_icons_svgicon) that will
+         * be rendered for the button which opens the popup.
+         */
+        this.arrowButtonSvgIcon = arrowDownIcon;
         /**
          * Fires each time the user clicks the main button.
          *
@@ -2232,8 +2169,8 @@ class SplitButtonComponent extends ListButton {
         this.listId = guid();
         this.buttonText = '';
         this.arrowButtonClicked = false;
-        this._rounded = DEFAULT_ROUNDED$1;
-        this._fillMode = DEFAULT_FILL_MODE$1;
+        this._rounded = DEFAULT_ROUNDED$2;
+        this._fillMode = DEFAULT_FILL_MODE$2;
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -2249,7 +2186,7 @@ class SplitButtonComponent extends ListButton {
      * * `none`
      */
     set rounded(rounded) {
-        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$2;
         this.handleClasses(newRounded, 'rounded');
         this._rounded = newRounded;
     }
@@ -2267,7 +2204,7 @@ class SplitButtonComponent extends ListButton {
      * * `link`
      */
     set fillMode(fillMode) {
-        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$1;
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE$2;
         this._fillMode = fillMode === 'clear' ? 'flat' : newFillMode;
     }
     get fillMode() {
@@ -2315,6 +2252,12 @@ class SplitButtonComponent extends ListButton {
         }
         return this._data;
     }
+    /**
+     * @hidden
+     */
+    get hasContent() {
+        return this.button?.nativeElement.childElementCount > 0;
+    }
     /**
      * @hidden
      */
@@ -2429,9 +2372,12 @@ class SplitButtonComponent extends ListButton {
         if (changes.hasOwnProperty('text')) {
             this.updateButtonText();
         }
-        if (isChanged("popupSettings", changes) && isPresent(this.popupRef)) {
+        if (anyChanged(['text', 'icon', 'svgIcon', 'iconClass', 'imageUrl'], changes)) {
+            this.toggleButtonIconClass();
+        }
+        if (isChanged('popupSettings', changes) && isPresent(this.popupRef)) {
             const popup = this.popupRef.popup.instance;
-            const newSettings = changes.popupSettings.currentValue;
+            const newSettings = changes['popupSettings'].currentValue;
             popup.popupClass = newSettings.popupClass;
             popup.animate = newSettings.animate;
             popup.popupAlign = this.popupAlign;
@@ -2464,7 +2410,7 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get anchorAlign() {
-        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
+        const align = { horizontal: this.popupSettings.align || 'left', vertical: 'bottom' };
         if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
@@ -2474,12 +2420,20 @@ class SplitButtonComponent extends ListButton {
      * @hidden
      */
     get popupAlign() {
-        let align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
+        const align = { horizontal: this.popupSettings.align || 'left', vertical: 'top' };
         if (this.direction === 'rtl' && !isPresent(this.popupSettings.align)) {
             align.horizontal = 'right';
         }
         return align;
     }
+    /**
+     * @hidden
+     */
+    get isIconButton() {
+        const hasIcon = this.icon || this.svgIcon || this.iconClass || this.imageUrl;
+        const hasTextContent = isDocumentAvailable() && this.button?.nativeElement.textContent.trim().length > 0;
+        return hasIcon && !hasTextContent;
+    }
     /**
      * Focuses the SplitButton component.
      */
@@ -2505,7 +2459,7 @@ class SplitButtonComponent extends ListButton {
     }
     updateButtonText() {
         if (isDocumentAvailable()) {
-            let innerText = this.wrapper.innerText
+            const innerText = this.wrapper.innerText
                 .split('\n')
                 .join('')
                 .trim();
@@ -2523,9 +2477,12 @@ class SplitButtonComponent extends ListButton {
             this.renderer.addClass(elem, classes.toAdd);
         }
     }
+    toggleButtonIconClass() {
+        this.button.nativeElement.classList[this.isIconButton ? 'add' : 'remove']('k-button-icon');
+    }
 }
-SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+SplitButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SplitButtonComponent, selector: "kendo-splitbutton", inputs: { text: "text", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", type: "type", imageUrl: "imageUrl", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor", disabled: "disabled", popupSettings: "popupSettings", tabIndex: "tabIndex", textField: "textField", data: "data", buttonClass: "buttonClass", arrowButtonClass: "arrowButtonClass", arrowButtonIcon: "arrowButtonIcon", arrowButtonSvgIcon: "arrowButtonSvgIcon" }, outputs: { buttonClick: "buttonClick", itemClick: "itemClick", onFocus: "focus", onBlur: "blur", open: "open", close: "close" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)" }, properties: { "class.k-focus": "this.isFocused", "class.k-split-button": "this.widgetClasses", "class.k-button-group": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER$2,
@@ -2535,7 +2492,7 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useValue: 'kendo.splitbutton'
         },
         PopupContainerService
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "arrowButton", first: true, predicate: ["arrowButton"], descendants: true, read: ElementRef }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoSplitButton"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoSplitButtonLocalizedMessages
             i18n-splitButtonLabel="kendo.splitbutton.splitButtonLabel|The text for the SplitButton aria-label"
             splitButtonLabel="{{ '{buttonText} splitbutton' }}">
@@ -2551,8 +2508,8 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             [class.k-active]="active"
-            [class.k-icon-button]="!text && icon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -2577,11 +2534,13 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             [ngClass]="arrowButtonClass"
             [disabled]="disabled"
             [icon]="arrowButtonIcon"
+            [svgIcon]="arrowButtonSvgIcon"
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [tabindex]="-1"
+            aria-hidden="true"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -2601,8 +2560,8 @@ SplitButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonComponent, decorators: [{
+    `, isInline: true, components: [{ type: ButtonComponent, 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: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: LocalizedSplitButtonMessagesDirective, selector: "[kendoSplitButtonLocalizedMessages]" }, { 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: SplitButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSplitButton',
@@ -2634,8 +2593,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             [class.k-active]="active"
-            [class.k-icon-button]="!text && icon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -2660,11 +2619,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [ngClass]="arrowButtonClass"
             [disabled]="disabled"
             [icon]="arrowButtonIcon"
+            [svgIcon]="arrowButtonSvgIcon"
             [size]="size"
             [rounded]="rounded"
             [fillMode]="fillMode"
             [themeColor]="themeColor"
             [tabindex]="-1"
+            aria-hidden="true"
             (click)="onArrowButtonClick()"
             (mousedown)="toggleArrowButtonActiveState(true)"
             (mouseup)="toggleArrowButtonActiveState(false)"
@@ -2686,10 +2647,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: PopupContainerService }]; }, propDecorators: { text: [{
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3$1.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: i0.Renderer2 }, { type: PopupContainerService }]; }, propDecorators: { text: [{
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], type: [{
@@ -2720,6 +2683,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], arrowButtonIcon: [{
                 type: Input
+            }], arrowButtonSvgIcon: [{
+                type: Input
             }], buttonClick: [{
                 type: Output
             }], itemClick: [{
@@ -2739,7 +2704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [ButtonItemTemplateDirective]
             }], button: [{
                 type: ViewChild,
-                args: ['button']
+                args: ['button', { read: ElementRef }]
             }], arrowButton: [{
                 type: ViewChild,
                 args: ['arrowButton', { read: ElementRef }]
@@ -2782,12 +2747,12 @@ class SplitButtonCustomMessagesComponent extends Messages {
         return true;
     }
 }
-SplitButtonCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-SplitButtonCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: SplitButtonCustomMessagesComponent, selector: "kendo-splitbutton-messages", providers: [{
+SplitButtonCustomMessagesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitButtonCustomMessagesComponent, deps: [{ token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+SplitButtonCustomMessagesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: SplitButtonCustomMessagesComponent, selector: "kendo-splitbutton-messages", providers: [{
             provide: Messages,
             useExisting: forwardRef(() => SplitButtonCustomMessagesComponent)
         }], usesInheritance: true, ngImport: i0, template: ``, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitButtonCustomMessagesComponent, decorators: [{
             type: Component,
             args: [{
                     providers: [{
@@ -2809,10 +2774,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class SplitButtonModule {
 }
-SplitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-SplitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent], imports: [CommonModule, PopupModule, ButtonModule, ListModule], exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent] });
-SplitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, imports: [[CommonModule, PopupModule, ButtonModule, ListModule], ListModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: SplitButtonModule, decorators: [{
+SplitButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+SplitButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitButtonModule, declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent], imports: [CommonModule, PopupModule, ButtonModule, ListModule], exports: [SplitButtonComponent, ListModule, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent] });
+SplitButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitButtonModule, imports: [[CommonModule, PopupModule, ButtonModule, ListModule], ListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SplitButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [SplitButtonComponent, LocalizedSplitButtonMessagesDirective, SplitButtonCustomMessagesComponent],
@@ -2828,7 +2793,7 @@ const NAVIGATION_SETTINGS_PROVIDER$1 = {
     provide: NAVIGATION_CONFIG,
     useValue: NAVIGATION_SETTINGS$1
 };
-const DEFAULT_FILL_MODE = 'solid';
+const DEFAULT_FILL_MODE$1 = 'solid';
 /**
  * Represents the Kendo UI DropDownButton component for Angular.
  *
@@ -2862,7 +2827,7 @@ class DropDownButtonComponent extends ListButton {
         super(focusService, navigationService, wrapperRef, zone, popupService, elRef, localization, cdr, containerService);
         this.containerService = containerService;
         /**
-         * Defines the name of an existing icon in a Kendo UI theme.
+         * Defines the name of an existing icon in the Kendo UI theme.
          */
         this.icon = '';
         /**
@@ -2930,7 +2895,7 @@ class DropDownButtonComponent extends ListButton {
         this.onBlur = new EventEmitter();
         this.listId = guid();
         this.buttonId = guid();
-        this._fillMode = DEFAULT_FILL_MODE;
+        this._fillMode = DEFAULT_FILL_MODE$1;
         this._itemClick = this.itemClick;
         this._blur = this.onBlur;
     }
@@ -3074,8 +3039,8 @@ class DropDownButtonComponent extends ListButton {
             || (this.popupRef && this.popupRef.popupElement.contains(element));
     }
 }
-DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
-DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
+DropDownButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonComponent, deps: [{ token: FocusService }, { token: NavigationService }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3$1.PopupService }, { token: i0.ElementRef }, { token: i1.LocalizationService }, { token: i0.ChangeDetectorRef }, { token: PopupContainerService }], target: i0.ɵɵFactoryTarget.Component });
+DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DropDownButtonComponent, selector: "kendo-dropdownbutton", inputs: { icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", imageUrl: "imageUrl", textField: "textField", data: "data", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { itemClick: "itemClick", onFocus: "focus", onBlur: "blur" }, host: { listeners: { "keydown": "keydown($event)", "keyup": "keyup($event)", "mousedown": "mousedown($event)", "mouseup": "mouseup($event)" }, properties: { "class.k-focus": "this.focused", "class.k-dropdown-button": "this.widgetClasses", "attr.dir": "this.dir" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER$1,
@@ -3085,7 +3050,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useValue: 'kendo.dropdownbutton'
         },
         PopupContainerService
-    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "itemTemplate", first: true, predicate: ButtonItemTemplateDirective, descendants: true }], viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true, read: ElementRef }, { propertyName: "buttonList", first: true, predicate: ["buttonList"], descendants: true }, { propertyName: "popupTemplate", first: true, predicate: ["popupTemplate"], descendants: true }, { propertyName: "container", first: true, predicate: ["container"], descendants: true, read: ViewContainerRef }], exportAs: ["kendoDropDownButton"], usesInheritance: true, ngImport: i0, template: `
         <button kendoButton #button
             type="button"
             [id]="buttonId"
@@ -3093,6 +3058,7 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -3127,8 +3093,8 @@ DropDownButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             </kendo-button-list>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: ButtonDirective, selector: "button[kendoButton], span[kendoButton]", inputs: ["toggleable", "togglable", "selected", "tabIndex", "icon", "iconClass", "imageUrl", "disabled", "size", "rounded", "fillMode", "themeColor", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonComponent, decorators: [{
+    `, isInline: true, components: [{ type: ButtonComponent, 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: ListComponent, selector: "kendo-button-list", inputs: ["data", "textField", "itemTemplate", "size"], outputs: ["onItemClick", "onItemBlur"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoDropDownButton',
@@ -3152,6 +3118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             [class.k-active]="active"
             [disabled]="disabled"
             [icon]="icon"
+            [svgIcon]="svgIcon"
             [iconClass]="iconClass"
             [imageUrl]="imageUrl"
             [ngClass]="buttonClass"
@@ -3188,7 +3155,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <ng-container #container></ng-container>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }]; }, propDecorators: { icon: [{
+        }], ctorParameters: function () { return [{ type: FocusService }, { type: NavigationService }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3$1.PopupService }, { type: i0.ElementRef }, { type: i1.LocalizationService }, { type: i0.ChangeDetectorRef }, { type: PopupContainerService }]; }, propDecorators: { icon: [{
+                type: Input
+            }], svgIcon: [{
                 type: Input
             }], iconClass: [{
                 type: Input
@@ -3228,7 +3197,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 args: [ButtonItemTemplateDirective]
             }], button: [{
                 type: ViewChild,
-                args: ['button']
+                args: ['button', { read: ElementRef }]
             }], buttonList: [{
                 type: ViewChild,
                 args: ['buttonList']
@@ -3262,10 +3231,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class DropDownButtonModule {
 }
-DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, declarations: [DropDownButtonComponent], imports: [CommonModule, PopupModule, ListModule, ButtonModule], exports: [DropDownButtonComponent, ListModule] });
-DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, imports: [[CommonModule, PopupModule, ListModule, ButtonModule], ListModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DropDownButtonModule, decorators: [{
+DropDownButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+DropDownButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, declarations: [DropDownButtonComponent], imports: [CommonModule, PopupModule, ListModule, ButtonModule], exports: [DropDownButtonComponent, ListModule] });
+DropDownButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, imports: [[CommonModule, PopupModule, ListModule, ButtonModule], ListModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DropDownButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [DropDownButtonComponent],
@@ -3274,6 +3243,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 }]
         }] });
 
+const DEFAULT_SIZE$1 = 'medium';
+const DEFAULT_ROUNDED$1 = 'medium';
+const DEFAULT_THEME_COLOR$1 = 'base';
+const DEFAULT_FILL_MODE = 'solid';
 /**
  * Displays a Chip that represents an input, attribute or an action.
  */
@@ -3309,6 +3282,10 @@ class ChipComponent {
         this.contentClick = new EventEmitter();
         this.tabIndex = 0;
         this.hostClass = true;
+        /**
+         * @hidden
+         */
+        this.defaultRemoveIcon = xCircleIcon;
         this._size = 'medium';
         this._rounded = 'medium';
         this._fillMode = 'solid';
@@ -3329,10 +3306,9 @@ class ChipComponent {
      * * `none`
      */
     set size(size) {
-        if (isPresent(size)) {
-            this._size = size;
-        }
-        this.handleClasses(this._size, 'size');
+        const newSize = size ? size : DEFAULT_SIZE$1;
+        this.handleClasses(newSize, 'size');
+        this._size = newSize;
     }
     get size() {
         return this._size;
@@ -3349,10 +3325,9 @@ class ChipComponent {
      * * `none`
      */
     set rounded(rounded) {
-        if (isPresent(rounded)) {
-            this._rounded = rounded;
-        }
-        this.handleClasses(this._rounded, 'rounded');
+        const newRounded = rounded ? rounded : DEFAULT_ROUNDED$1;
+        this.handleClasses(newRounded, 'rounded');
+        this._rounded = newRounded;
     }
     get rounded() {
         return this._rounded;
@@ -3367,10 +3342,9 @@ class ChipComponent {
      * * `none`
      */
     set fillMode(fillMode) {
-        if (isPresent(fillMode)) {
-            this._fillMode = fillMode;
-        }
-        this.handleClasses(this._fillMode, 'fillMode');
+        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
+        this.handleClasses(newFillMode, 'fillMode');
+        this._fillMode = newFillMode;
     }
     get fillMode() {
         return this._fillMode;
@@ -3389,16 +3363,15 @@ class ChipComponent {
      * * `none`
      */
     set themeColor(themeColor) {
-        if (isPresent(themeColor)) {
-            this._themeColor = themeColor;
-        }
-        this.handleThemeColor(this._themeColor);
+        const newThemeColor = themeColor ? themeColor : DEFAULT_THEME_COLOR$1;
+        this.handleThemeColor(newThemeColor);
+        this._themeColor = newThemeColor;
     }
     get themeColor() {
         return this._themeColor;
     }
     get hasIconClass() {
-        return this.icon || this.iconClass || this.avatarClass ? true : false;
+        return Boolean(this.icon || this.iconClass || this.avatarClass);
     }
     get disabledClass() {
         return this.disabled;
@@ -3445,23 +3418,20 @@ class ChipComponent {
      */
     get customIconClass() {
         this.verifyIconSettings([this.icon, this.avatarClass]);
-        return `${this.iconClass}`;
+        return this.iconClass;
     }
     /**
      * @hidden
      */
     get chipAvatarClass() {
         this.verifyIconSettings([this.icon, this.iconClass]);
-        return `${this.avatarClass}`;
+        return this.avatarClass;
     }
     /**
      * @hidden
      */
     get removeIconClass() {
-        if (this.removeIcon) {
-            return `${this.removeIcon}`;
-        }
-        return `k-i-x-circle`;
+        return this.removeIcon ? this.removeIcon : 'k-i-x-circle';
     }
     /**
      * Focuses the Chip component.
@@ -3560,32 +3530,28 @@ class ChipComponent {
         }
     }
 }
-ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
+ChipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipComponent, selector: "kendo-chip", inputs: { label: "label", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", avatarClass: "avatarClass", selected: "selected", removable: "removable", removeIcon: "removeIcon", removeSvgIcon: "removeSvgIcon", disabled: "disabled", size: "size", rounded: "rounded", fillMode: "fillMode", themeColor: "themeColor" }, outputs: { remove: "remove", contentClick: "contentClick" }, host: { properties: { "attr.tabindex": "this.tabIndex", "class.k-chip": "this.hostClass", "class.k-chip-has-icon": "this.hasIconClass", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "class.k-selected": "this.selectedClass", "class.k-focus": "this.focusedClass", "attr.dir": "this.direction" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.chip'
         }
     ], usesOnChanges: true, ngImport: i0, template: `
-        <span
-            *ngIf="icon"
-            class="k-chip-icon k-icon"
-            [ngClass]="kendoIconClass"
-        >
-        </span>
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-chip-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
 
-        <span
+        <kendo-icon-wrapper
             *ngIf="iconClass"
-            class="k-chip-icon"
-            [ngClass]="customIconClass"
-        >
-        </span>
+            innerCssClass="k-chip-icon"
+            [customFontClass]="customIconClass"></kendo-icon-wrapper>
 
         <span
             *ngIf="avatarClass"
-            class="k-chip-avatar k-avatar k-rounded-full"
-        >
+            class="k-chip-avatar k-avatar k-rounded-full">
             <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
         </span>
 
@@ -3599,39 +3565,34 @@ ChipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         <span class="k-chip-actions">
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
-                (click)="onRemoveClick($event)"
-                >
-                <span
-                    class="k-icon"
-                    [ngClass]="removeIconClass"
-                >
-                </span>
+                (click)="onRemoveClick($event)">
+                <kendo-icon-wrapper
+                    name="x-circle"
+                    [svgIcon]="defaultRemoveIcon || removeSvgIcon"
+                    [customFontClass]="removeIcon"></kendo-icon-wrapper>
+
             </span>
         </span>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ 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: ChipComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chip',
                     template: `
-        <span
-            *ngIf="icon"
-            class="k-chip-icon k-icon"
-            [ngClass]="kendoIconClass"
-        >
-        </span>
+        <kendo-icon-wrapper
+            *ngIf="icon || svgIcon"
+            innerCssClass="k-chip-icon"
+            [name]="icon"
+            [svgIcon]="svgIcon"></kendo-icon-wrapper>
 
-        <span
+        <kendo-icon-wrapper
             *ngIf="iconClass"
-            class="k-chip-icon"
-            [ngClass]="customIconClass"
-        >
-        </span>
+            innerCssClass="k-chip-icon"
+            [customFontClass]="customIconClass"></kendo-icon-wrapper>
 
         <span
             *ngIf="avatarClass"
-            class="k-chip-avatar k-avatar k-rounded-full"
-        >
+            class="k-chip-avatar k-avatar k-rounded-full">
             <span class="k-avatar-image" [ngClass]="chipAvatarClass"></span>
         </span>
 
@@ -3645,13 +3606,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         <span class="k-chip-actions">
             <span class="k-chip-action k-chip-remove-action"
                 *ngIf="removable"
-                (click)="onRemoveClick($event)"
-                >
-                <span
-                    class="k-icon"
-                    [ngClass]="removeIconClass"
-                >
-                </span>
+                (click)="onRemoveClick($event)">
+                <kendo-icon-wrapper
+                    name="x-circle"
+                    [svgIcon]="defaultRemoveIcon || removeSvgIcon"
+                    [customFontClass]="removeIcon"></kendo-icon-wrapper>
+
             </span>
         </span>
     `,
@@ -3667,6 +3627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], avatarClass: [{
@@ -3677,6 +3639,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], removeIcon: [{
                 type: Input
+            }], removeSvgIcon: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }], size: [{
@@ -3881,8 +3845,8 @@ class ChipListComponent {
         }
     }
 }
-ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
+ChipListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipListComponent, deps: [{ token: i1.LocalizationService }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ChipListComponent, selector: "kendo-chiplist, kendo-chip-list", inputs: { selection: "selection", size: "size" }, outputs: { selectedChange: "selectedChange", remove: "remove" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.k-chip-list": "this.hostClass", "attr.aria-orientation": "this.orientation", "attr.dir": "this.direction", "class.k-selection-single": "this.single", "attr.aria-multiselectable": "this.multiple", "class.k-selection-multiple": "this.multiple", "attr.role": "this.role" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
@@ -3891,7 +3855,7 @@ ChipListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
     ], queries: [{ propertyName: "chips", predicate: ChipComponent }], ngImport: i0, template: `
         <ng-content></ng-content>
     `, isInline: true });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-chiplist, kendo-chip-list',
@@ -3980,17 +3944,17 @@ const declarations$1 = [
  */
 class ChipModule {
 }
-ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, declarations: [ChipComponent,
-        ChipListComponent], imports: [CommonModule], exports: [ChipComponent,
+ChipModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ChipModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, declarations: [ChipComponent,
+        ChipListComponent], imports: [CommonModule, IconsModule], exports: [ChipComponent,
         ChipListComponent] });
-ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, imports: [[CommonModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ChipModule, decorators: [{
+ChipModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, imports: [[CommonModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ChipModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations$1],
                     exports: [exportedModules$1],
-                    imports: [CommonModule]
+                    imports: [CommonModule, IconsModule]
                 }]
         }] });
 
@@ -3998,7 +3962,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * @hidden
  */
 function getAnchorAlign(fabAlign, rtl) {
-    let align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'bottom' };
+    const align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'bottom' };
     if (fabAlign.horizontal === 'end') {
         align.horizontal = rtl ? 'left' : 'right';
     }
@@ -4015,7 +3979,7 @@ function getAnchorAlign(fabAlign, rtl) {
  * @hidden
  */
 function getPopupAlign(fabAlign, rtl) {
-    let align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'top' };
+    const align = { horizontal: (rtl ? 'right' : 'left'), vertical: 'top' };
     if (fabAlign.horizontal === 'end') {
         align.horizontal = rtl ? 'left' : 'right';
     }
@@ -4069,9 +4033,9 @@ class DialItemTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-DialItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-DialItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: DialItemTemplateDirective, selector: "[kendoDialItemTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
+DialItemTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialItemTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+DialItemTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: DialItemTemplateDirective, selector: "[kendoDialItemTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialItemTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoDialItemTemplate]'
@@ -4091,9 +4055,9 @@ class FloatingActionButtonTemplateDirective {
         this.templateRef = templateRef;
     }
 }
-FloatingActionButtonTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-FloatingActionButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.16", type: FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
+FloatingActionButtonTemplateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingActionButtonTemplateDirective, deps: [{ token: i0.TemplateRef, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+FloatingActionButtonTemplateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.11", type: FloatingActionButtonTemplateDirective, selector: "[kendoFloatingActionButtonTemplate]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingActionButtonTemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoFloatingActionButtonTemplate]'
@@ -4118,7 +4082,7 @@ class DialItemComponent {
     }
     get title() {
         const label = this.item.label;
-        return label ? label : this.itemTitle;
+        return label || this.itemTitle;
     }
     get indexAttr() {
         return this.index;
@@ -4154,8 +4118,8 @@ class DialItemComponent {
         return directions[dir][align];
     }
 }
-DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialItemComponent, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
+DialItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialItemComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialItemComponent, selector: "[kendoDialItem]", inputs: { cssClass: "cssClass", cssStyle: "cssStyle", isFocused: "isFocused", index: "index", item: "item", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-item": "this.hostClass", "attr.role": "this.role", "attr.aria-disabled": "this.disabledClass", "class.k-disabled": "this.disabledClass", "attr.title": "this.title", "attr.aria-label": "this.title", "attr.data-fab-item-index": "this.indexAttr" } }, ngImport: i0, template: `
         <ng-template *ngIf="dialItemTemplate"
             [ngTemplateOutlet]="dialItemTemplate"
             [ngTemplateOutletContext]="{ $implicit: item, index: index, isFocused: isFocused }"
@@ -4164,10 +4128,15 @@ DialItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
 
         <ng-container *ngIf="!dialItemTemplate">
             <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
-            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.icon || item.iconClass || item.svgIcon"
+                [name]="item.icon"
+                innerCssClass="k-fab-item-icon"
+                [customFontClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
         </ng-container>
-    `, isInline: true, directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialItemComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], 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: DialItemComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -4181,7 +4150,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
 
         <ng-container *ngIf="!dialItemTemplate">
             <span *ngIf="item.label" class="k-fab-item-text">{{ item.label }}</span>
-            <span *ngIf="item.icon || item.iconClass" [ngClass]="iconClasses"></span>
+            <kendo-icon-wrapper
+                *ngIf="item.icon || item.iconClass || item.svgIcon"
+                [name]="item.icon"
+                innerCssClass="k-fab-item-icon"
+                [customFontClass]="item.iconClass"
+                [svgIcon]="item.svgIcon"></kendo-icon-wrapper>
         </ng-container>
     `
                 }]
@@ -4246,8 +4220,8 @@ class DialListComponent {
         this.subscriptions.unsubscribe();
     }
 }
-DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: DialListComponent, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
+DialListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialListComponent, deps: [{ token: FocusService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: DialListComponent, selector: "[kendoDialList]", inputs: { dialItems: "dialItems", dialItemTemplate: "dialItemTemplate", align: "align" }, host: { properties: { "class.k-fab-items": "this.hostClass", "class.k-fab-items-bottom": "this.bottomClass", "class.k-fab-items-top": "this.topClass" } }, ngImport: i0, template: `
         <ng-container *ngFor='let item of dialItems; let idx = index'>
             <li
                 kendoButtonFocusable
@@ -4262,8 +4236,8 @@ DialListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             >
             </li>
         </ng-container>
-    `, isInline: true, components: [{ type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }], directives: [{ type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: DialListComponent, decorators: [{
+    `, isInline: true, components: [{ type: DialItemComponent, selector: "[kendoDialItem]", inputs: ["cssClass", "cssStyle", "isFocused", "index", "item", "dialItemTemplate", "align"] }], directives: [{ type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FocusableDirective, selector: "[kendoButtonFocusable]", inputs: ["index"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DialListComponent, decorators: [{
             type: Component,
             args: [{
                     // eslint-disable-next-line @angular-eslint/component-selector
@@ -4737,7 +4711,7 @@ class FloatingActionButtonComponent {
     onNavigationEnterPress() {
         this.ngZone.run(() => {
             if (this.isOpen) {
-                let focusedIndex = this.focusService.focused;
+                const focusedIndex = this.focusService.focused;
                 const focusedItem = this.dialItems[focusedIndex];
                 if (focusedItem && focusedItem.disabled) {
                     return;
@@ -4960,8 +4934,8 @@ class FloatingActionButtonComponent {
         return DEFAULT_DURATION;
     }
 }
-FloatingActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i0.NgZone }, { token: i3.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.16", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
+FloatingActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingActionButtonComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: FocusService }, { token: NavigationService }, { token: i0.NgZone }, { token: i3$1.PopupService }, { token: i4.AnimationBuilder }, { token: i1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
+FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FloatingActionButtonComponent, selector: "kendo-floatingactionbutton", inputs: { themeColor: "themeColor", size: "size", rounded: "rounded", disabled: "disabled", align: "align", offset: "offset", positionMode: "positionMode", icon: "icon", svgIcon: "svgIcon", iconClass: "iconClass", buttonClass: "buttonClass", dialClass: "dialClass", text: "text", dialItemAnimation: "dialItemAnimation", tabIndex: "tabIndex", dialItems: "dialItems" }, outputs: { onBlur: "blur", onFocus: "focus", dialItemClick: "dialItemClick", open: "open", close: "close" }, host: { properties: { "class.k-pos-fixed": "this.fixedClass", "class.k-pos-absolute": "this.absoluteClass", "attr.dir": "this.direction" } }, providers: [
         FocusService,
         NavigationService,
         NAVIGATION_SETTINGS_PROVIDER,
@@ -4998,7 +4972,12 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             </ng-template>
 
             <ng-container *ngIf="!fabTemplate">
-                <span *ngIf="icon || iconClass" [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    *ngIf="icon || iconClass || svgIcon"
+                    [name]="icon"
+                    innerCssClass="k-fab-icon"
+                    [customFontClass]="iconClass"
+                    [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 <span *ngIf="text" class="k-fab-text">{{ text }}</span>
             </ng-container>
         </button>
@@ -5017,8 +4996,8 @@ FloatingActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "1
             >
             </ul>
         </ng-template>
-    `, isInline: true, components: [{ type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i8.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonComponent, decorators: [{
+    `, isInline: true, components: [{ type: i2.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: DialListComponent, selector: "[kendoDialList]", inputs: ["dialItems", "dialItemTemplate", "align"] }], directives: [{ type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { 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: FloatingActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-floatingactionbutton',
@@ -5060,7 +5039,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
             </ng-template>
 
             <ng-container *ngIf="!fabTemplate">
-                <span *ngIf="icon || iconClass" [ngClass]="iconClasses"></span>
+                <kendo-icon-wrapper
+                    *ngIf="icon || iconClass || svgIcon"
+                    [name]="icon"
+                    innerCssClass="k-fab-icon"
+                    [customFontClass]="iconClass"
+                    [svgIcon]="svgIcon"></kendo-icon-wrapper>
                 <span *ngIf="text" class="k-fab-text">{{ text }}</span>
             </ng-container>
         </button>
@@ -5081,7 +5065,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
         </ng-template>
     `
                 }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i0.NgZone }, { type: i3.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }]; }, propDecorators: { fixedClass: [{
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: FocusService }, { type: NavigationService }, { type: i0.NgZone }, { type: i3$1.PopupService }, { type: i4.AnimationBuilder }, { type: i1.LocalizationService }]; }, propDecorators: { fixedClass: [{
                 type: HostBinding,
                 args: ['class.k-pos-fixed']
             }], absoluteClass: [{
@@ -5118,6 +5102,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
                 type: Input
             }], icon: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }], iconClass: [{
                 type: Input
             }], buttonClass: [{
@@ -5187,20 +5173,20 @@ const declarations = [
  */
 class FloatingActionButtonModule {
 }
-FloatingActionButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FloatingActionButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, declarations: [FloatingActionButtonComponent,
+FloatingActionButtonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingActionButtonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+FloatingActionButtonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingActionButtonModule, declarations: [FloatingActionButtonComponent,
         DialItemTemplateDirective,
         FloatingActionButtonTemplateDirective, DialListComponent,
-        DialItemComponent], imports: [CommonModule, PopupModule, ListModule, EventsModule], exports: [FloatingActionButtonComponent,
+        DialItemComponent], imports: [CommonModule, PopupModule, ListModule, EventsModule, IconsModule], exports: [FloatingActionButtonComponent,
         DialItemTemplateDirective,
         FloatingActionButtonTemplateDirective] });
-FloatingActionButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, imports: [[CommonModule, PopupModule, ListModule, EventsModule]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
+FloatingActionButtonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingActionButtonModule, imports: [[CommonModule, PopupModule, ListModule, EventsModule, IconsModule]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FloatingActionButtonModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [declarations],
                     exports: [exportedModules],
-                    imports: [CommonModule, PopupModule, ListModule, EventsModule]
+                    imports: [CommonModule, PopupModule, ListModule, EventsModule, IconsModule]
                 }]
         }] });
 
@@ -5237,10 +5223,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  */
 class ButtonsModule {
 }
-ButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
-ButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, imports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImport: i0, type: ButtonsModule, decorators: [{
+ButtonsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ButtonsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
+ButtonsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, imports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ButtonsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [ButtonGroupModule, ButtonModule, SplitButtonModule, DropDownButtonModule, ChipModule, FloatingActionButtonModule]
@@ -5251,5 +5237,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.16", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonDirective as Button, ButtonDirective, ButtonGroupComponent as ButtonGroup, ButtonGroupComponent, ButtonGroupModule, ButtonItemTemplateDirective, ButtonModule, ButtonsModule, ChipComponent, ChipListComponent, ChipModule, DialItemTemplateDirective, DropDownButtonComponent as DropDownButton, DropDownButtonComponent, DropDownButtonModule, FloatingActionButtonComponent, FloatingActionButtonModule, FloatingActionButtonTemplateDirective, FocusableDirective, ListComponent, ListModule, LocalizedSplitButtonMessagesDirective, PreventableEvent, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule, TemplateContextDirective };
+export { ButtonComponent as Button, ButtonComponent as ButtonDirective, ButtonGroupComponent as ButtonGroup, ButtonGroupComponent, ButtonGroupModule, ButtonItemTemplateDirective, ButtonModule, ButtonsModule, ChipComponent, ChipListComponent, ChipModule, DialItemTemplateDirective, DropDownButtonComponent as DropDownButton, DropDownButtonComponent, DropDownButtonModule, FloatingActionButtonComponent, FloatingActionButtonModule, FloatingActionButtonTemplateDirective, FocusableDirective, ListComponent, ListModule, LocalizedSplitButtonMessagesDirective, PreventableEvent, SplitButtonComponent as SplitButton, SplitButtonComponent, SplitButtonCustomMessagesComponent, SplitButtonModule, TemplateContextDirective };