@progress/kendo-angular-dateinputs 11.0.0-develop.92 → 11.0.0-develop.93

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

@@ -8,7 +8,7 @@ import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgControl } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX, RTL } from '@progress/kendo-angular-l10n';
 import { cloneDate, addDays, getDate, isEqual, addDecades, addCenturies, firstDecadeOfCentury, lastDecadeOfCentury, firstYearOfDecade, createDate, lastYearOfDecade, lastMonthOfYear, lastDayOfMonth, durationInCenturies, addYears, durationInDecades, addWeeks, addMonths, firstDayOfMonth, dayOfWeek, durationInMonths, firstMonthOfYear, durationInYears, weekInYear } from '@progress/kendo-date-math';
-import * as i5 from '@progress/kendo-angular-common';
+import * as i6 from '@progress/kendo-angular-common';
 import { isDocumentAvailable, guid, Keys as Keys$1, hasObservers, KendoInput, EventsModule, ResizeSensorModule } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1 from '@progress/kendo-angular-intl';
@@ -16,7 +16,12 @@ import { IntlModule } from '@progress/kendo-angular-intl';
 import { Subject, Subscription, ReplaySubject, Observable, combineLatest, of, interval, animationFrameScheduler, fromEvent, EMPTY, from, BehaviorSubject, merge } from 'rxjs';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
+import { chevronRightIcon, chevronLeftIcon, caretAltUpIcon, caretAltDownIcon, calendarIcon, clockIcon } from '@progress/kendo-svg-icons';
+import * as i5 from '@progress/kendo-angular-buttons';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import { map, scan, takeWhile, debounceTime, tap, filter } from 'rxjs/operators';
+import * as i7$1 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i1$2 from '@progress/kendo-angular-popup';
 import { PopupModule } from '@progress/kendo-angular-popup';
 import { touchEnabled } from '@progress/kendo-common';
@@ -28,7 +33,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-dateinputs',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673253277,
+    publishDate: 1673265668,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1776,7 +1781,7 @@ ViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </td>
         </ng-container>
     </tr>
-  `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+  `, isInline: true, directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ViewComponent, decorators: [{
             type: Component,
             args: [{
@@ -2402,6 +2407,14 @@ class HeaderComponent {
         this.localization = localization;
         this.intl = intl;
         this.disabledDatesService = disabledDatesService;
+        /**
+         * @hidden
+         */
+        this.chevronRightIcon = chevronRightIcon;
+        /**
+         * @hidden
+         */
+        this.chevronLeftIcon = chevronLeftIcon;
         this.navigate = true;
         this.todayAvailable = true;
         this.min = new Date(MIN_DATE);
@@ -2517,15 +2530,18 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     <span class="k-calendar-nav k-hstack">
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronLeftIcon"
+            icon="chevron-left"
             tabindex="-1"
             type="button"
+            class="k-calendar-nav-prev"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
             [title]="prevButtonTitle"
             (click)="prevButtonClick.emit()"
         >
-            <span class="k-button-icon k-icon k-i-chevron-left"></span>
         </button>
         <button
             class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
@@ -2541,7 +2557,11 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
         </button>
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronRightIcon"
+            icon="chevron-right"
+            class="k-calendar-nav-next"
             tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
@@ -2549,10 +2569,9 @@ HeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
             [title]="nextButtonTitle"
             (click)="nextButtonClick.emit()"
         >
-            <span class="k-button-icon k-icon k-i-chevron-right"></span>
         </button>
     </span>
-  `, isInline: true, directives: [{ type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+  `, isInline: true, components: [{ type: i5.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: HeaderComponent, decorators: [{
             type: Component,
             args: [{
@@ -2580,15 +2599,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
     <span class="k-calendar-nav k-hstack">
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-prev"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronLeftIcon"
+            icon="chevron-left"
             tabindex="-1"
             type="button"
+            class="k-calendar-nav-prev"
             [attr.aria-disabled]="isPrevDisabled"
             [disabled]="isPrevDisabled"
             [title]="prevButtonTitle"
             (click)="prevButtonClick.emit()"
         >
-            <span class="k-button-icon k-icon k-i-chevron-left"></span>
         </button>
         <button
             class="k-calendar-nav-today k-button k-button-md k-button-flat k-button-flat-primary k-rounded-md"
@@ -2604,7 +2626,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         </button>
         <button
             *ngIf="showNavigationButtons"
-            class="k-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-icon-button k-calendar-nav-next"
+            kendoButton
+            fillMode="flat"
+            [svgIcon]="chevronRightIcon"
+            icon="chevron-right"
+            class="k-calendar-nav-next"
             tabindex="-1"
             type="button"
             [attr.aria-disabled]="isNextDisabled"
@@ -2612,7 +2638,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             [title]="nextButtonTitle"
             (click)="nextButtonClick.emit()"
         >
-            <span class="k-button-icon k-icon k-i-chevron-right"></span>
         </button>
     </span>
   `
@@ -4746,7 +4771,7 @@ class VirtualizationComponent {
         return indexOffset < this.containerScrollPosition ? ScrollDirection.Backward : ScrollDirection.Forward;
     }
 }
-VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i5.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
+VirtualizationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: VirtualizationComponent, deps: [{ token: SCROLLER_FACTORY_TOKEN }, { token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i6.ScrollbarWidthService }], target: i0.ɵɵFactoryTarget.Component });
 VirtualizationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: VirtualizationComponent, selector: "kendo-virtualization", inputs: { direction: "direction", itemHeight: "itemHeight", itemWidth: "itemWidth", topOffset: "topOffset", bottomOffset: "bottomOffset", maxScrollDifference: "maxScrollDifference", scrollOffsetSize: "scrollOffsetSize", scrollDuration: "scrollDuration", skip: "skip", take: "take", total: "total" }, outputs: { activeIndexChange: "activeIndexChange", pageChange: "pageChange", scrollChange: "scrollChange" }, host: { properties: { "class.k-flex": "this.wrapperClasses", "class.k-content": "this.wrapperClasses", "class.k-scrollable": "this.wrapperClasses", "class.k-scrollable-horizontal": "this.horizontalClass" } }, providers: [{
             provide: SCROLLER_FACTORY_TOKEN,
             useValue: DEFAULT_SCROLLER_FACTORY
@@ -4778,7 +4803,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [SCROLLER_FACTORY_TOKEN]
-                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i5.ScrollbarWidthService }]; }, propDecorators: { direction: [{
+                }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.NgZone }, { type: i6.ScrollbarWidthService }]; }, propDecorators: { direction: [{
                 type: Input
             }], itemHeight: [{
                 type: Input
@@ -4944,7 +4969,7 @@ NavigationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: KForOf, selector: "[kFor][kForOf]", inputs: ["kForOf", "kForTrackBy", "kForTemplate"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NavigationComponent, decorators: [{
             type: Component,
             args: [{
@@ -6566,7 +6591,7 @@ CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </kendo-multiviewcalendar-messages>
         </kendo-multiviewcalendar>
     </ng-container>
-  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i5.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: NavigationComponent, selector: "kendo-calendar-navigation", inputs: ["activeView", "min", "max", "focusedDate", "templateRef"], outputs: ["valueChange", "pageChange"] }, { type: ViewListComponent, selector: "kendo-calendar-viewlist", inputs: ["cellTemplateRef", "weekNumberTemplateRef", "headerTitleTemplateRef", "activeView", "cellUID", "focusedDate", "isActive", "min", "max", "selectedDates", "tabIndex", "disabled", "id", "weekNumber"], outputs: ["cellClick", "weekNumberCellClick", "activeDateChange", "todayButtonClick", "pageChange", "focusCalendar", "blurCalendar", "focusedCellChange"] }, { type: i6.ResizeSensorComponent, selector: "kendo-resize-sensor", inputs: ["rateLimit"], outputs: ["resize"] }, { type: MultiViewCalendarComponent, selector: "kendo-multiviewcalendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "disabledDatesRangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "isActive", "disabledDates", "activeView", "bottomView", "topView", "showViewHeader", "animateNavigation", "weekNumber", "activeRangeEnd", "selectionRange", "views", "orientation", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate"], outputs: ["activeViewChange", "navigate", "cellEnter", "cellLeave", "valueChange", "blur", "focus", "focusCalendar"], exportAs: ["kendo-multiviewcalendar"] }, { type: MultiViewCalendarCustomMessagesComponent, selector: "kendo-multiviewcalendar-messages" }], directives: [{ type: CalendarLocalizedMessagesDirective, selector: "[kendoCalendarLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{
@@ -7321,6 +7346,14 @@ class DateInputComponent {
         this.injector = injector;
         this.localization = localization;
         this.pickerService = pickerService;
+        /**
+         * @hidden
+         */
+        this.caretAltUpIcon = caretAltUpIcon;
+        /**
+         * @hidden
+         */
+        this.caretAltDownIcon = caretAltDownIcon;
         /**
          * Sets or gets the `disabled` property of the DateInput and
          * determines whether the component is active
@@ -8331,8 +8364,14 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             (mouseleave)="arrowDirection = arrow.None"
             (click)="handleButtonClick(1)"
             [title]="localization.get('increment')"
-            [attr.aria-label]="localization.get('increment')">
-            <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
+            [attr.aria-label]="localization.get('increment')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltUpIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
         <button
             #spindown
@@ -8343,11 +8382,17 @@ DateInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
             (mousedown)="arrowDirection = arrow.Down"
             (mouseleave)="arrowDirection = arrow.None"
             [title]="localization.get('decrement')"
-            [attr.aria-label]="localization.get('decrement')">
-            <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            [attr.aria-label]="localization.get('decrement')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
     </span>
-  `, isInline: true, directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputComponent, decorators: [{
             type: Component,
             args: [{
@@ -8408,8 +8453,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (mouseleave)="arrowDirection = arrow.None"
             (click)="handleButtonClick(1)"
             [title]="localization.get('increment')"
-            [attr.aria-label]="localization.get('increment')">
-            <span class="k-button-icon k-icon k-i-caret-alt-up"></span>
+            [attr.aria-label]="localization.get('increment')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-up"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltUpIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
         <button
             #spindown
@@ -8420,8 +8471,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             (mousedown)="arrowDirection = arrow.Down"
             (mouseleave)="arrowDirection = arrow.None"
             [title]="localization.get('decrement')"
-            [attr.aria-label]="localization.get('decrement')">
-            <span class="k-button-icon k-icon k-i-caret-alt-down"></span>
+            [attr.aria-label]="localization.get('decrement')"
+            >
+                <kendo-icon-wrapper
+                    name="caret-alt-down"
+                    class="k-button-icon"
+                    [svgIcon]="caretAltDownIcon"
+                >
+                </kendo-icon-wrapper>
         </button>
     </span>
   `
@@ -8660,6 +8717,10 @@ class DatePickerComponent {
         this.pickerService = pickerService;
         this.disabledDatesService = disabledDatesService;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.calendarIcon = calendarIcon;
         /**
          * Defines the active view that the Calendar initially renders
          * ([see example]({% slug calendar_type_datepicker %}#toc-active-view)).
@@ -9556,7 +9617,12 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-calendar"></span>
+            <kendo-icon-wrapper
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-container #container></ng-container>
         <ng-template #popupTemplate>
@@ -9596,7 +9662,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -9668,7 +9734,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-calendar"></span>
+            <kendo-icon-wrapper
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-container #container></ng-container>
         <ng-template #popupTemplate>
@@ -10753,7 +10824,7 @@ TimeListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
             </li>
         </ul>
     </kendo-virtualization>
-  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
+  `, isInline: true, components: [{ type: VirtualizationComponent, selector: "kendo-virtualization", inputs: ["direction", "itemHeight", "itemWidth", "topOffset", "bottomOffset", "maxScrollDifference", "scrollOffsetSize", "scrollDuration", "skip", "take", "total"], outputs: ["activeIndexChange", "pageChange", "scrollChange"] }], directives: [{ type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeListComponent, decorators: [{
             type: Component,
             args: [{
@@ -11411,7 +11482,7 @@ TimeSelectorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0",
                 [disabled]="disabled"
             >{{localization.get('accept')}}</button>
         </div>
-    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value"], outputs: ["valueChange"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: TimeListComponent, selector: "kendo-timelist", inputs: ["min", "max", "part", "step", "disabled", "value"], outputs: ["valueChange"] }], directives: [{ type: TimeSelectorLocalizedMessagesDirective, selector: "[kendoTimeSelectorLocalizedMessages]" }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimeSelectorComponent, decorators: [{
             type: Component,
             args: [{
@@ -11657,6 +11728,10 @@ class TimePickerComponent {
         this.pickerService = pickerService;
         this.intl = intl;
         this.touchEnabled = touchEnabled;
+        /**
+         * @hidden
+         */
+        this.clockIcon = clockIcon;
         /**
          * Sets or gets the `disabled` property of the TimePicker and
          * determines whether the component is active
@@ -12501,7 +12576,12 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-clock"></span>
+            <kendo-icon-wrapper
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <kendo-timeselector
@@ -12538,7 +12618,7 @@ TimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             </kendo-timeselector>
         </ng-template>
         <ng-container #container></ng-container>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: TimePickerLocalizedMessagesDirective, selector: "[kendoTimePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: TimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -12634,7 +12714,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon k-i-clock"></span>
+            <kendo-icon-wrapper
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
         <ng-template #popupTemplate>
             <kendo-timeselector
@@ -12848,6 +12933,14 @@ class DateTimePickerComponent {
         this.localization = localization;
         this.disabledDatesService = disabledDatesService;
         this.renderer = renderer;
+        /**
+         * @hidden
+         */
+        this.calendarIcon = calendarIcon;
+        /**
+         * @hidden
+         */
+        this.clockIcon = clockIcon;
         /**
          * @hidden
          */
@@ -13903,12 +13996,20 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon"
-                [ngClass]="{
-                    'k-i-calendar': activeTab === 'date',
-                    'k-i-clock': activeTab === 'time'
-                }"
-            ></span>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'date'"
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'time'"
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
 
         <ng-container #container></ng-container>
@@ -14058,7 +14159,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
                 </div>
             </div>
         </ng-template>
-    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: DateInputComponent, selector: "kendo-dateinput", inputs: ["focusableId", "pickerType", "disabled", "readonly", "title", "tabindex", "role", "ariaReadOnly", "tabIndex", "format", "formatPlaceholder", "placeholder", "steps", "max", "min", "rangeValidation", "autoCorrect", "incompleteDateValidation", "twoDigitYearMax", "value", "spinners", "isPopupOpen", "hasPopup", "size", "rounded", "fillMode"], outputs: ["valueChange", "valueUpdate", "focus", "blur"], exportAs: ["kendo-dateinput"] }, { type: i7$1.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: CalendarComponent, selector: "kendo-calendar", inputs: ["id", "focusedDate", "min", "max", "rangeValidation", "selection", "value", "disabled", "tabindex", "tabIndex", "disabledDates", "navigation", "activeView", "bottomView", "topView", "type", "animateNavigation", "weekNumber", "cellTemplate", "monthCellTemplate", "yearCellTemplate", "decadeCellTemplate", "centuryCellTemplate", "weekNumberTemplate", "headerTitleTemplate", "navigationItemTemplate"], outputs: ["activeViewChange", "navigate", "activeViewDateChange", "blur", "focus", "valueChange"], exportAs: ["kendo-calendar"] }, { type: CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }, { type: TimeSelectorComponent, selector: "kendo-timeselector", inputs: ["format", "min", "max", "cancelButton", "setButton", "nowButton", "disabled", "steps", "value"], outputs: ["valueChange", "valueReject"], exportAs: ["kendo-timeselector"] }, { type: TimeSelectorCustomMessagesComponent, selector: "kendo-timeselector-messages" }], directives: [{ type: LocalizedMessagesDirective, selector: "[kendoDateTimePickerLocalizedMessages]" }, { type: i6.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
@@ -14165,12 +14266,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
             }"
             [scope]="this"
         >
-            <span class="k-button-icon k-icon"
-                [ngClass]="{
-                    'k-i-calendar': activeTab === 'date',
-                    'k-i-clock': activeTab === 'time'
-                }"
-            ></span>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'date'"
+                name="calendar"
+                class="k-button-icon"
+                [svgIcon]="calendarIcon"
+            >
+            </kendo-icon-wrapper>
+            <kendo-icon-wrapper
+                *ngIf="activeTab === 'time'"
+                name="clock"
+                class="k-button-icon"
+                [svgIcon]="clockIcon"
+            >
+            </kendo-icon-wrapper>
         </button>
 
         <ng-container #container></ng-container>
@@ -15572,10 +15681,10 @@ class CalendarCommonModule {
 CalendarCommonModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 CalendarCommonModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, declarations: [KForOf,
         HeaderComponent,
-        ViewComponent], imports: [CommonModule, EventsModule], exports: [KForOf,
+        ViewComponent], imports: [CommonModule, EventsModule, ButtonModule], exports: [KForOf,
         HeaderComponent,
         ViewComponent] });
-CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, imports: [[CommonModule, EventsModule]] });
+CalendarCommonModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, imports: [[CommonModule, EventsModule, ButtonModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: CalendarCommonModule, decorators: [{
             type: NgModule,
             args: [{
@@ -15589,7 +15698,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         HeaderComponent,
                         ViewComponent
                     ],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, ButtonModule]
                 }]
         }] });
 
@@ -16000,10 +16109,10 @@ class DateInputModule {
 DateInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 DateInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, declarations: [DateInputComponent,
         DateInputCustomMessagesComponent,
-        DateInputLocalizedMessagesDirective], imports: [CommonModule, IntlModule, EventsModule], exports: [DateInputComponent,
+        DateInputLocalizedMessagesDirective], imports: [CommonModule, IntlModule, EventsModule, IconsModule], exports: [DateInputComponent,
         DateInputCustomMessagesComponent,
         DateInputLocalizedMessagesDirective] });
-DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, imports: [[CommonModule, IntlModule, EventsModule]] });
+DateInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, imports: [[CommonModule, IntlModule, EventsModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateInputModule, decorators: [{
             type: NgModule,
             args: [{
@@ -16017,7 +16126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DateInputCustomMessagesComponent,
                         DateInputLocalizedMessagesDirective
                     ],
-                    imports: [CommonModule, IntlModule, EventsModule]
+                    imports: [CommonModule, IntlModule, EventsModule, IconsModule]
                 }]
         }] });
 
@@ -16069,7 +16178,8 @@ DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         IntlModule,
         PopupModule,
         TemplatesModule,
-        EventsModule], exports: [DatePickerComponent,
+        EventsModule,
+        IconsModule], exports: [DatePickerComponent,
         DatePickerCustomMessagesComponent,
         DatePickerLocalizedMessagesDirective,
         TemplatesModule] });
@@ -16080,7 +16190,8 @@ DatePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", versio
             IntlModule,
             PopupModule,
             TemplatesModule,
-            EventsModule
+            EventsModule,
+            IconsModule
         ], TemplatesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DatePickerModule, decorators: [{
             type: NgModule,
@@ -16103,7 +16214,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         IntlModule,
                         PopupModule,
                         TemplatesModule,
-                        EventsModule
+                        EventsModule,
+                        IconsModule
                     ],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]
@@ -16235,7 +16347,8 @@ const COMPONENT_MODULES$1 = [
     IntlModule,
     PopupModule,
     VirtualizationModule,
-    EventsModule
+    EventsModule,
+    IconsModule
 ];
 const providers = [
     TimePickerDOMService,
@@ -16266,7 +16379,8 @@ TimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         IntlModule,
         PopupModule,
         VirtualizationModule,
-        EventsModule], exports: [TimePickerLocalizedMessagesDirective,
+        EventsModule,
+        IconsModule], exports: [TimePickerLocalizedMessagesDirective,
         TimeListComponent,
         TimePickerCustomMessagesComponent,
         TimePickerComponent,
@@ -16338,7 +16452,8 @@ DateTimePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", ve
         TimePickerModule,
         PopupModule,
         EventsModule,
-        TemplatesModule], exports: [DateTimePickerComponent,
+        TemplatesModule,
+        IconsModule], exports: [DateTimePickerComponent,
         DateTimePickerCustomMessagesComponent,
         LocalizedMessagesDirective, TemplatesModule] });
 DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerModule, providers: [
@@ -16351,7 +16466,8 @@ DateTimePickerModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", ve
             TimePickerModule,
             PopupModule,
             EventsModule,
-            TemplatesModule
+            TemplatesModule,
+            IconsModule
         ], TemplatesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: DateTimePickerModule, decorators: [{
             type: NgModule,
@@ -16371,7 +16487,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         TimePickerModule,
                         PopupModule,
                         EventsModule,
-                        TemplatesModule
+                        TemplatesModule,
+                        IconsModule
                     ],
                     providers: [
                         { provide: TOUCH_ENABLED, useValue: touchEnabled }