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

package/calendar/calendar-common.module.d.ts

@@ -8,6 +8,7 @@ import * as i2 from "./header.component";
 import * as i3 from "./view.component";
 import * as i4 from "@angular/common";
 import * as i5 from "@progress/kendo-angular-common";
+import * as i6 from "@progress/kendo-angular-buttons";
 /**
  * @hidden
  *
@@ -19,6 +20,6 @@ import * as i5 from "@progress/kendo-angular-common";
  */
 export declare class CalendarCommonModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<CalendarCommonModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarCommonModule, [typeof i1.KForOf, typeof i2.HeaderComponent, typeof i3.ViewComponent], [typeof i4.CommonModule, typeof i5.EventsModule], [typeof i1.KForOf, typeof i2.HeaderComponent, typeof i3.ViewComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CalendarCommonModule, [typeof i1.KForOf, typeof i2.HeaderComponent, typeof i3.ViewComponent], [typeof i4.CommonModule, typeof i5.EventsModule, typeof i6.ButtonModule], [typeof i1.KForOf, typeof i2.HeaderComponent, typeof i3.ViewComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<CalendarCommonModule>;
 }

package/calendar/header.component.d.ts

@@ -10,6 +10,7 @@ import { CalendarViewEnum } from './models/view.enum';
 import { CalendarOrientation } from './models/orientation';
 import { BusViewService } from './services/bus-view.service';
 import { DisabledDatesService } from './services/disabled-dates.service';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -20,6 +21,14 @@ export declare class HeaderComponent implements OnChanges, OnInit, OnDestroy {
     localization: LocalizationService;
     private intl;
     private disabledDatesService;
+    /**
+     * @hidden
+     */
+    chevronRightIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    chevronLeftIcon: SVGIcon;
     navigate: boolean;
     todayAvailable: boolean;
     activeViewValue: CalendarView;

package/dateinput/dateinput.component.d.ts

@@ -14,6 +14,7 @@ import { FormatSettings } from './models/format-settings.model';
 import { DateInputSize } from '../common/models/size';
 import { DateInputRounded } from '../common/models/rounded';
 import { DateInputFillMode } from '../common/models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 declare type DatePickerType = 'daterangestart' | 'daterangeend' | 'datepicker' | 'datetimepicker' | 'timepicker';
 /**
@@ -28,6 +29,14 @@ export declare class DateInputComponent implements OnInit, AfterViewInit, Contro
     private injector;
     localization: LocalizationService;
     private pickerService?;
+    /**
+     * @hidden
+     */
+    caretAltUpIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    caretAltDownIcon: SVGIcon;
     /**
      * @hidden
      */

package/dateinput/dateinput.module.d.ts

@@ -9,12 +9,13 @@ import * as i3 from "./localization/dateinput-localized-messages.directive";
 import * as i4 from "@angular/common";
 import * as i5 from "@progress/kendo-angular-intl";
 import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DateInput component.
  */
 export declare class DateInputModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DateInputModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateInputModule, [typeof i1.DateInputComponent, typeof i2.DateInputCustomMessagesComponent, typeof i3.DateInputLocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.IntlModule, typeof i6.EventsModule], [typeof i1.DateInputComponent, typeof i2.DateInputCustomMessagesComponent, typeof i3.DateInputLocalizedMessagesDirective]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DateInputModule, [typeof i1.DateInputComponent, typeof i2.DateInputCustomMessagesComponent, typeof i3.DateInputLocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.IntlModule, typeof i6.EventsModule, typeof i7.IconsModule], [typeof i1.DateInputComponent, typeof i2.DateInputCustomMessagesComponent, typeof i3.DateInputLocalizedMessagesDirective]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DateInputModule>;
 }

package/datepicker/datepicker.component.d.ts

@@ -27,6 +27,7 @@ import { DateInputComponent } from '../dateinput/dateinput.component';
 import { DateInputSize } from '../common/models/size';
 import { DateInputRounded } from '../common/models/rounded';
 import { DateInputFillMode } from '../common/models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DatePicker component for Angular]({% slug overview_datepicker %}#toc-basic-usage).
@@ -42,6 +43,10 @@ export declare class DatePickerComponent implements ControlValueAccessor, OnInit
     private pickerService;
     private disabledDatesService;
     private touchEnabled;
+    /**
+     * @hidden
+     */
+    calendarIcon: SVGIcon;
     container: ViewContainerRef;
     popupTemplate: TemplateRef<any>;
     toggleButton: ElementRef;

package/datepicker/datepicker.module.d.ts

@@ -13,12 +13,13 @@ import * as i7 from "@progress/kendo-angular-intl";
 import * as i8 from "@progress/kendo-angular-popup";
 import * as i9 from "../calendar/templates.module";
 import * as i10 from "@progress/kendo-angular-common";
+import * as i11 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DatePicker component.
  */
 export declare class DatePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DatePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DatePickerModule, [typeof i1.DatePickerComponent, typeof i2.DatePickerCustomMessagesComponent, typeof i3.DatePickerLocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.DateInputModule, typeof i6.CalendarModule, typeof i7.IntlModule, typeof i8.PopupModule, typeof i9.TemplatesModule, typeof i10.EventsModule], [typeof i1.DatePickerComponent, typeof i2.DatePickerCustomMessagesComponent, typeof i3.DatePickerLocalizedMessagesDirective, typeof i9.TemplatesModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DatePickerModule, [typeof i1.DatePickerComponent, typeof i2.DatePickerCustomMessagesComponent, typeof i3.DatePickerLocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.DateInputModule, typeof i6.CalendarModule, typeof i7.IntlModule, typeof i8.PopupModule, typeof i9.TemplatesModule, typeof i10.EventsModule, typeof i11.IconsModule], [typeof i1.DatePickerComponent, typeof i2.DatePickerCustomMessagesComponent, typeof i3.DatePickerLocalizedMessagesDirective, typeof i9.TemplatesModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DatePickerModule>;
 }

package/datetimepicker/datetimepicker.component.d.ts

@@ -30,6 +30,7 @@ import { FormatSettings } from '../dateinput/models/format-settings.model';
 import { DateInputSize } from '../common/models/size';
 import { DateInputRounded } from '../common/models/rounded';
 import { DateInputFillMode } from '../common/models/fillmode';
+import { SVGIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [Kendo UI DateTimePicker component for Angular]({% slug overview_datetimepicker %}).
@@ -45,6 +46,14 @@ export declare class DateTimePickerComponent implements OnInit, OnChanges, After
     localization: LocalizationService;
     private disabledDatesService;
     private renderer;
+    /**
+     * @hidden
+     */
+    calendarIcon: SVGIcon;
+    /**
+     * @hidden
+     */
+    clockIcon: SVGIcon;
     /**
      * @hidden
      */

package/datetimepicker/datetimepicker.module.d.ts

@@ -14,12 +14,13 @@ import * as i8 from "../timepicker/timepicker.module";
 import * as i9 from "@progress/kendo-angular-popup";
 import * as i10 from "@progress/kendo-angular-common";
 import * as i11 from "../calendar/templates.module";
+import * as i12 from "@progress/kendo-angular-icons";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
  * definition for the DateTimePicker component.
  */
 export declare class DateTimePickerModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<DateTimePickerModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerModule, [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.IntlModule, typeof i6.DateInputModule, typeof i7.CalendarModule, typeof i8.TimePickerModule, typeof i9.PopupModule, typeof i10.EventsModule, typeof i11.TemplatesModule], [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective, typeof i11.TemplatesModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<DateTimePickerModule, [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective], [typeof i4.CommonModule, typeof i5.IntlModule, typeof i6.DateInputModule, typeof i7.CalendarModule, typeof i8.TimePickerModule, typeof i9.PopupModule, typeof i10.EventsModule, typeof i11.TemplatesModule, typeof i12.IconsModule], [typeof i1.DateTimePickerComponent, typeof i2.DateTimePickerCustomMessagesComponent, typeof i3.LocalizedMessagesDirective, typeof i11.TemplatesModule]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<DateTimePickerModule>;
 }

package/esm2020/calendar/calendar-common.module.mjs

@@ -8,6 +8,7 @@ import { KForOf } from './for.directive';
 import { HeaderComponent } from './header.component';
 import { ViewComponent } from './view.component';
 import { EventsModule } from '@progress/kendo-angular-common';
+import { ButtonModule } from '@progress/kendo-angular-buttons';
 import * as i0 from "@angular/core";
 /**
  * @hidden
@@ -23,10 +24,10 @@ export 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: [{
@@ -40,6 +41,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         HeaderComponent,
                         ViewComponent
                     ],
-                    imports: [CommonModule, EventsModule]
+                    imports: [CommonModule, EventsModule, ButtonModule]
                 }]
         }] });

package/esm2020/calendar/header.component.mjs

@@ -12,13 +12,15 @@ import { dateInRange, getToday, isInRange } from '../util';
 import { BusViewService } from './services/bus-view.service';
 import { DisabledDatesService } from './services/disabled-dates.service';
 import { Subscription } from 'rxjs';
+import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "./services/bus-view.service";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "@progress/kendo-angular-intl";
 import * as i4 from "./services/disabled-dates.service";
-import * as i5 from "@progress/kendo-angular-common";
-import * as i6 from "@angular/common";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "@angular/common";
 /**
  * @hidden
  */
@@ -29,6 +31,14 @@ export 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);
@@ -144,15 +154,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"
@@ -168,7 +181,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"
@@ -176,10 +193,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: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.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: [{
@@ -207,15 +223,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"
@@ -231,7 +250,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"
@@ -239,7 +262,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>
   `

package/esm2020/dateinput/dateinput.component.mjs

@@ -19,13 +19,15 @@ import { PickerService } from '../common/picker.service';
 import { closest } from '../common/dom-queries';
 import { requiresZoneOnBlur, isPresent, attributeNames } from '../common/utils';
 import { Subscription } from 'rxjs';
+import { caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-intl";
 import * as i2 from "@progress/kendo-angular-l10n";
 import * as i3 from "../common/picker.service";
-import * as i4 from "./localization/dateinput-localized-messages.directive";
-import * as i5 from "@progress/kendo-angular-common";
-import * as i6 from "@angular/common";
+import * as i4 from "@progress/kendo-angular-icons";
+import * as i5 from "./localization/dateinput-localized-messages.directive";
+import * as i6 from "@progress/kendo-angular-common";
+import * as i7 from "@angular/common";
 let nextId = 0;
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DateInputComponent/#toc-max';
@@ -463,6 +465,14 @@ export 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
@@ -1473,8 +1483,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
@@ -1485,11 +1501,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: i4.DateInputLocalizedMessagesDirective, selector: "[kendoDateInputLocalizedMessages]" }, { type: i5.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i5.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: [{
@@ -1550,8 +1572,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
@@ -1562,8 +1590,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>
   `

package/esm2020/dateinput/dateinput.module.mjs

@@ -9,6 +9,7 @@ import { IntlModule } from '@progress/kendo-angular-intl';
 import { DateInputLocalizedMessagesDirective } from './localization/dateinput-localized-messages.directive';
 import { DateInputCustomMessagesComponent } from './localization/dateinput-custom-messages.component';
 import { EventsModule } from '@progress/kendo-angular-common';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -19,10 +20,10 @@ export 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: [{
@@ -36,6 +37,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         DateInputCustomMessagesComponent,
                         DateInputLocalizedMessagesDirective
                     ],
-                    imports: [CommonModule, IntlModule, EventsModule]
+                    imports: [CommonModule, IntlModule, EventsModule, IconsModule]
                 }]
         }] });

package/esm2020/datepicker/datepicker.component.mjs

@@ -31,16 +31,18 @@ import { requiresZoneOnBlur, currentFocusTarget, attributeNames } from '../commo
 import { fromEvent } from 'rxjs';
 import { incompleteDateValidator } from '../validators/incomplete-date.validator';
 import { disabledDatesValidator } from '../validators/disabled-date.validator';
+import { calendarIcon } from '@progress/kendo-svg-icons';
 import * as i0 from "@angular/core";
 import * as i1 from "@progress/kendo-angular-l10n";
 import * as i2 from "@progress/kendo-angular-popup";
 import * as i3 from "../common/picker.service";
 import * as i4 from "../calendar/services/disabled-dates.service";
 import * as i5 from "../dateinput/dateinput.component";
-import * as i6 from "../calendar/calendar.component";
-import * as i7 from "../calendar/localization/calendar-custom-messages.component";
-import * as i8 from "./localization/datepicker-localized-messages.directive";
-import * as i9 from "@progress/kendo-angular-common";
+import * as i6 from "@progress/kendo-angular-icons";
+import * as i7 from "../calendar/calendar.component";
+import * as i8 from "../calendar/localization/calendar-custom-messages.component";
+import * as i9 from "./localization/datepicker-localized-messages.directive";
+import * as i10 from "@progress/kendo-angular-common";
 const MIN_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-min';
 const MAX_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/api/DatePickerComponent/#toc-max';
 const VALUE_DOC_LINK = 'http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json';
@@ -61,6 +63,10 @@ export 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)).
@@ -957,7 +963,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>
@@ -997,7 +1008,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
                 </kendo-calendar-messages>
             </kendo-calendar>
         <ng-template>
-    `, isInline: true, components: [{ type: i5.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: i6.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: i7.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i8.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i9.EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    `, isInline: true, components: [{ type: i5.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: i6.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: i7.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: i8.CalendarCustomMessagesComponent, selector: "kendo-calendar-messages" }], directives: [{ type: i9.DatePickerLocalizedMessagesDirective, selector: "[kendoDatePickerLocalizedMessages]" }, { type: i10.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: [{
@@ -1069,7 +1080,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>

package/esm2020/datepicker/datepicker.module.mjs

@@ -15,6 +15,7 @@ import { DatePickerLocalizedMessagesDirective } from './localization/datepicker-
 import { DatePickerCustomMessagesComponent } from './localization/datepicker-custom-messages.component';
 import { touchEnabled } from '@progress/kendo-common';
 import { TOUCH_ENABLED } from '../touch-enabled';
+import { IconsModule } from '@progress/kendo-angular-icons';
 import * as i0 from "@angular/core";
 /**
  * Represents the [NgModule](link:site.data.urls.angular['ngmoduleapi'])
@@ -31,7 +32,8 @@ DatePickerModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", versio
         IntlModule,
         PopupModule,
         TemplatesModule,
-        EventsModule], exports: [DatePickerComponent,
+        EventsModule,
+        IconsModule], exports: [DatePickerComponent,
         DatePickerCustomMessagesComponent,
         DatePickerLocalizedMessagesDirective,
         TemplatesModule] });
@@ -42,7 +44,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,
@@ -65,7 +68,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         IntlModule,
                         PopupModule,
                         TemplatesModule,
-                        EventsModule
+                        EventsModule,
+                        IconsModule
                     ],
                     providers: [{ provide: TOUCH_ENABLED, useValue: touchEnabled }]
                 }]