@progress/kendo-angular-upload 11.0.0-develop.96 → 11.0.0-develop.98

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

@@ -7,18 +7,21 @@ import { HttpHeaders, HttpRequest, HttpEventType, HttpResponse } from '@angular/
 import * as i0 from '@angular/core';
 import { EventEmitter, Injectable, Directive, Input, HostBinding, HostListener, Component, ViewChildren, forwardRef, Inject, ElementRef, ContentChild, ViewChild, Output, isDevMode, NgModule } from '@angular/core';
 import { guid, Keys, isDocumentAvailable, KendoInput, isChanged } from '@progress/kendo-angular-common';
+import { fileAudioIcon, fileVideoIcon, fileImageIcon, fileTxtIcon, filePresentationIcon, fileExcelIcon, fileProgrammingIcon, filePdfIcon, fileConfigIcon, fileZipIcon, fileDiscImageIcon, arrowRotateCwSmallIcon, playSmIcon, pauseSmIcon, cancelIcon, xIcon, fileIcon, copyIcon, checkIcon, exclamationCircleIcon, uploadIcon } from '@progress/kendo-svg-icons';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import * as i1$1 from '@progress/kendo-angular-l10n';
 import { ComponentMessages, LocalizationService, L10N_PREFIX } from '@progress/kendo-angular-l10n';
 import { fromEvent, merge } from 'rxjs';
 import { filter } from 'rxjs/operators';
 import { validatePackage } from '@progress/kendo-licensing';
-import * as i6 from '@progress/kendo-angular-buttons';
+import * as i7 from '@progress/kendo-angular-buttons';
 import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { trigger, state, style, transition, animate } from '@angular/animations';
 import * as i3 from '@progress/kendo-angular-progressbar';
 import { ProgressBarModule } from '@progress/kendo-angular-progressbar';
-import * as i5 from '@angular/common';
+import * as i4 from '@progress/kendo-angular-icons';
+import { IconsModule } from '@progress/kendo-angular-icons';
+import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
 /**
@@ -636,6 +639,23 @@ const fileGroupMap = {
         ".dmg", ".iso", ".toast", ".vcd", ".bin", ".cue", ".mdf"
     ]
 };
+;
+/**
+ * @hidden
+ */
+const fileSVGGroupMap = {
+    audio: fileAudioIcon,
+    video: fileVideoIcon,
+    image: fileImageIcon,
+    txt: fileTxtIcon,
+    presentation: filePresentationIcon,
+    data: fileExcelIcon,
+    programming: fileProgrammingIcon,
+    pdf: filePdfIcon,
+    config: fileConfigIcon,
+    zip: fileZipIcon,
+    discImage: fileDiscImageIcon
+};
 
 /* eslint-disable  no-bitwise */
 /**
@@ -844,9 +864,12 @@ const isFocusable = (element, checkVisibility = true) => {
  * @hidden
  */
 const getFileGroupCssClass = (fileExtension) => {
-    const initial = 'k-i-file';
+    const initial = 'file';
     for (const group in fileGroupMap) {
         if (fileGroupMap[group].indexOf(fileExtension) >= 0) {
+            if (group === 'discImage') {
+                return `${initial}-disc-image`;
+            }
             return `${initial}-${group}`;
         }
     }
@@ -1470,7 +1493,7 @@ const packageMetadata = {
     name: '@progress/kendo-angular-upload',
     productName: 'Kendo UI for Angular',
     productCodes: ['KENDOUIANGULAR', 'KENDOUICOMPLETE'],
-    publishDate: 1673446147,
+    publishDate: 1673460761,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
@@ -1685,6 +1708,11 @@ class FileListItemActionButtonComponent {
         this.actionFocused = false;
         this.retryFocused = false;
         this.pauseResumeFocused = false;
+        this.retrySVGIcon = arrowRotateCwSmallIcon;
+        this.playSVGIcon = playSmIcon;
+        this.pauseSVGIcon = pauseSmIcon;
+        this.cancelSVGIcon = cancelIcon;
+        this.deleteSVGIcon = xIcon;
     }
     onFocus(type) {
         if (type === 'action') {
@@ -1780,106 +1808,132 @@ class FileListItemActionButtonComponent {
 }
 FileListItemActionButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemActionButtonComponent, deps: [{ token: UploadService }, { token: i1$1.LocalizationService }, { token: NavigationService }], target: i0.ɵɵFactoryTarget.Component });
 FileListItemActionButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: { file: "file", disabled: "disabled", progress: "progress" }, ngImport: i0, template: `
-      <span class="k-upload-actions">
+    <span class="k-upload-actions">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
-        <button type="button" *ngIf="isFailed" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.retryFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('retry')"
-          (blur)="onBlur('retry')"
-          (click)="onRetryClick()">
-          <span class="k-icon k-button-icon k-retry k-i-refresh-sm"
-            [attr.aria-label]="retryButtonTitle"
-            [attr.title]="retryButtonTitle">
-          </span>
+        <button
+            *ngIf="isFailed"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.retryFocused }"
+            [attr.tabIndex]="-1"
+
+            (focus)="onFocus('retry')"
+            (blur)="onBlur('retry')"
+            (click)="onRetryClick()"
+        >
+            <kendo-icon-wrapper
+                name="refresh-sm"
+                [svgIcon]="retrySVGIcon"
+                innerCssClass="k-retry"
+                [attr.aria-label]="retryButtonTitle"
+                [attr.title]="retryButtonTitle"
+            ></kendo-icon-wrapper>
         </button>
 
-        <button *ngIf="isResumable" type="button" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('pauseResume')"
-          (blur)="onBlur('pauseResume')"
-          (click)="onPauseResumeClick()">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-play-sm': isPaused,
-              'k-i-pause-sm': !isPaused
-            }"
-            [attr.aria-label]='pauseResumeButtonTitle'
-            [attr.title]='pauseResumeButtonTitle'>
-          </span>
+        <button
+            *ngIf="isResumable"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('pauseResume')"
+            (blur)="onBlur('pauseResume')"
+            (click)="onPauseResumeClick()"
+        >
+            <kendo-icon-wrapper
+                [name]="isPaused ? 'play-sm' : 'pause-sm'"
+                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+                [attr.aria-label]='pauseResumeButtonTitle'
+                [attr.title]='pauseResumeButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
 
-        <button type="button" *ngIf="isActionButtonVisible" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.actionFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('action')"
-          (blur)="onBlur('action')"
-          (click)="onRemoveCancelClick($event)">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-cancel': isUploading,
-              'k-delete k-i-x': !isUploading
-            }"
-            [attr.aria-label]='actionButtonTitle'
-            [attr.title]='actionButtonTitle'>
-          </span>
+        <button 
+            *ngIf="isActionButtonVisible"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            type="button"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('action')"
+            (blur)="onBlur('action')"
+            [ngClass]="{ 'k-focus': this.actionFocused }"
+            (click)="onRemoveCancelClick($event)"
+        >
+            <kendo-icon-wrapper
+                [name]="isUploading ? 'cancel' : 'x'"
+                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+                [innerCssClass]="!isUploading ? 'k-delete' : ''"
+                [attr.aria-label]='actionButtonTitle'
+                [attr.title]='actionButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
-      </span>
-    `, isInline: true, directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    </span>
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListItemActionButtonComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-file-list-item-action-button',
                     template: `
-      <span class="k-upload-actions">
+    <span class="k-upload-actions">
         <span class="k-upload-pct" *ngIf="isUploading || isPaused">{{progress}}%</span>
 
-        <button type="button" *ngIf="isFailed" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.retryFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('retry')"
-          (blur)="onBlur('retry')"
-          (click)="onRetryClick()">
-          <span class="k-icon k-button-icon k-retry k-i-refresh-sm"
-            [attr.aria-label]="retryButtonTitle"
-            [attr.title]="retryButtonTitle">
-          </span>
+        <button
+            *ngIf="isFailed"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.retryFocused }"
+            [attr.tabIndex]="-1"
+
+            (focus)="onFocus('retry')"
+            (blur)="onBlur('retry')"
+            (click)="onRetryClick()"
+        >
+            <kendo-icon-wrapper
+                name="refresh-sm"
+                [svgIcon]="retrySVGIcon"
+                innerCssClass="k-retry"
+                [attr.aria-label]="retryButtonTitle"
+                [attr.title]="retryButtonTitle"
+            ></kendo-icon-wrapper>
         </button>
 
-        <button *ngIf="isResumable" type="button" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('pauseResume')"
-          (blur)="onBlur('pauseResume')"
-          (click)="onPauseResumeClick()">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-play-sm': isPaused,
-              'k-i-pause-sm': !isPaused
-            }"
-            [attr.aria-label]='pauseResumeButtonTitle'
-            [attr.title]='pauseResumeButtonTitle'>
-          </span>
+        <button
+            *ngIf="isResumable"
+            type="button"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            [ngClass]="{ 'k-focus': this.pauseResumeFocused }"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('pauseResume')"
+            (blur)="onBlur('pauseResume')"
+            (click)="onPauseResumeClick()"
+        >
+            <kendo-icon-wrapper
+                [name]="isPaused ? 'play-sm' : 'pause-sm'"
+                [svgIcon]="isPaused ? playSVGIcon : pauseSVGIcon"
+                [attr.aria-label]='pauseResumeButtonTitle'
+                [attr.title]='pauseResumeButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
 
-        <button type="button" *ngIf="isActionButtonVisible" class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
-          [ngClass]="{ 'k-focus': this.actionFocused }"
-          [attr.tabIndex]="-1"
-          (focus)="onFocus('action')"
-          (blur)="onBlur('action')"
-          (click)="onRemoveCancelClick($event)">
-          <span class="k-icon k-button-icon"
-            [ngClass]="{
-              'k-i-cancel': isUploading,
-              'k-delete k-i-x': !isUploading
-            }"
-            [attr.aria-label]='actionButtonTitle'
-            [attr.title]='actionButtonTitle'>
-          </span>
+        <button 
+            *ngIf="isActionButtonVisible"
+            class="k-button k-icon-button k-button-md k-rounded-md k-button-flat k-button-flat-base k-upload-action"
+            type="button"
+            [attr.tabIndex]="-1"
+            (focus)="onFocus('action')"
+            (blur)="onBlur('action')"
+            [ngClass]="{ 'k-focus': this.actionFocused }"
+            (click)="onRemoveCancelClick($event)"
+        >
+            <kendo-icon-wrapper
+                [name]="isUploading ? 'cancel' : 'x'"
+                [svgIcon]="isUploading ? cancelSVGIcon : deleteSVGIcon"
+                [innerCssClass]="!isUploading ? 'k-delete' : ''"
+                [attr.aria-label]='actionButtonTitle'
+                [attr.title]='actionButtonTitle'
+            ></kendo-icon-wrapper>
         </button>
-      </span>
+    </span>
     `
                 }]
         }], ctorParameters: function () { return [{ type: UploadService }, { type: i1$1.LocalizationService }, { type: NavigationService }]; }, propDecorators: { file: [{
@@ -1952,6 +2006,17 @@ class FileListSingleItemComponent extends FileListItemBase {
     get fileGroupClass() {
         return getFileGroupCssClass(this.file.extension ? this.file.extension : '');
     }
+    get fileSVGGroupIcon() {
+        const initial = fileIcon;
+        if (this.file.extension) {
+            for (const group in fileGroupMap) {
+                if (fileGroupMap[group].indexOf(this.file.extension) >= 0) {
+                    return fileSVGGroupMap[group];
+                }
+            }
+        }
+        return initial;
+    }
     get isUploadSuccessful() {
         return this.file.state === FileState.Uploaded;
     }
@@ -1971,7 +2036,12 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         >
         </kendo-progressbar>
         <span class="k-file-icon-wrapper"> 
-            <span class="k-file-icon k-icon" [ngClass]="fileGroupClass"></span>
+            <kendo-icon-wrapper
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">
@@ -1996,7 +2066,7 @@ FileListSingleItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -2026,7 +2096,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         >
         </kendo-progressbar>
         <span class="k-file-icon-wrapper"> 
-            <span class="k-file-icon k-icon" [ngClass]="fileGroupClass"></span>
+            <kendo-icon-wrapper
+                [name]="fileGroupClass"
+                [svgIcon]="fileSVGGroupIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span class="k-file-info">
             <ng-container *ngIf="!fileInfoTemplate">
@@ -2068,6 +2143,7 @@ class FileListMultipleItemsComponent extends FileListItemBase {
     constructor(localization, uploadService) {
         super(uploadService);
         this.localization = localization;
+        this.copySVGIcon = copyIcon;
         this.subscribeUploadProgress((args) => {
             if (args.files[0].uid === this.files[0].uid) {
                 this.progressComplete = args.percentComplete;
@@ -2115,7 +2191,12 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
         >
         </kendo-progressbar>
         <span class="k-file-icon-wrapper">
-            <span class="k-file-icon k-icon k-i-copy"></span>
+            <kendo-icon-wrapper
+                name="copy"
+                [svgIcon]="copySVGIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span class="k-multiple-files-wrapper">
             <ng-container *ngIf="!fileInfoTemplate">
@@ -2145,7 +2226,7 @@ FileListMultipleItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
             [disabled]='disabled'
             [progress]='progressComplete'>
         </kendo-upload-file-list-item-action-button>
-    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
+    `, isInline: true, components: [{ type: i3.ProgressBarComponent, selector: "kendo-progressbar", inputs: ["label", "progressCssStyle", "progressCssClass", "emptyCssStyle", "emptyCssClass", "animation"], outputs: ["animationEnd"], exportAs: ["kendoProgressBar"] }, { type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }, { type: FileListItemActionButtonComponent, selector: "kendo-upload-file-list-item-action-button", inputs: ["file", "disabled", "progress"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }], animations: [
         trigger('progressState', [
             state('active', style({ opacity: 1 })),
             state('inactive', style({ opacity: 0 })),
@@ -2175,7 +2256,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
         >
         </kendo-progressbar>
         <span class="k-file-icon-wrapper">
-            <span class="k-file-icon k-icon k-i-copy"></span>
+            <kendo-icon-wrapper
+                name="copy"
+                [svgIcon]="copySVGIcon"
+                innerCssClass="k-file-icon"
+            >
+            </kendo-icon-wrapper>
         </span>
         <span class="k-multiple-files-wrapper">
             <ng-container *ngIf="!fileInfoTemplate">
@@ -2297,7 +2383,7 @@ FileListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", vers
               }"></ng-template>
       </li>
     </ng-template>
-    `, isInline: true, components: [{ type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }], directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
+    `, isInline: true, components: [{ type: FileListSingleItemComponent, selector: "kendo-upload-file-list-single-item", inputs: ["disabled", "file", "fileInfoTemplate"] }, { type: FileListMultipleItemsComponent, selector: "kendo-upload-file-list-multiple-items", inputs: ["disabled", "files", "fileInfoTemplate"] }], directives: [{ type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: FileListItemDirective, selector: "[kendoUploadFileListItem]", inputs: ["files", "index"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }, { type: TemplateContextDirective, selector: "[templateContext]", inputs: ["templateContext"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileListComponent, decorators: [{
             type: Component,
             args: [{
@@ -3138,7 +3224,7 @@ FileSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ve
             [fileTemplate]="fileTemplate"
             [fileInfoTemplate]="fileInfoTemplate">
         </ul>
-    `, isInline: true, components: [{ type: i6.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    `, isInline: true, components: [{ type: i7.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectComponent, decorators: [{
             type: Component,
             args: [{
@@ -3323,6 +3409,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
 class UploadStatusTotalComponent {
     constructor(localization) {
         this.localization = localization;
+        this.checkmarkIcon = checkIcon;
+        this.exceptionSVGIcon = exclamationCircleIcon;
+        this.uploadSVGIcon = uploadIcon;
+        this.pauseSVGIcon = pauseSmIcon;
+    }
+    get iconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return 'checkmark';
+        }
+        if (!this.isUploading && this.isFailed) {
+            return 'exception';
+        }
+        if (this.isUploading) {
+            return 'upload';
+        }
+        if (this.isPaused) {
+            return 'pause-sm';
+        }
+    }
+    get SVGIconClass() {
+        if (!this.isUploading && !this.isFailed) {
+            return this.checkmarkIcon;
+        }
+        if (!this.isUploading && this.isFailed) {
+            return this.exceptionSVGIcon;
+        }
+        if (this.isUploading) {
+            return this.uploadSVGIcon;
+        }
+        if (this.isPaused) {
+            return this.pauseSVGIcon;
+        }
     }
     ngDoCheck() {
         this.isPaused = this.fileList.hasFileWithState([FileState.Paused]);
@@ -3339,29 +3457,23 @@ class UploadStatusTotalComponent {
 }
 UploadStatusTotalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadStatusTotalComponent, deps: [{ token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
 UploadStatusTotalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: { fileList: "fileList" }, ngImport: i0, template: `
-        <span class="k-icon"
-            [ngClass]="{
-                'k-i-checkmark': !this.isUploading && !this.isFailed,
-                'k-i-exception': !this.isUploading && this.isFailed,
-                'k-i-upload': this.isUploading,
-                'k-i-pause-sm': this.isPaused
-            }">
-        </span>
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
         {{statusText}}
-    `, isInline: true, directives: [{ type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadStatusTotalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'kendo-upload-status-total',
                     template: `
-        <span class="k-icon"
-            [ngClass]="{
-                'k-i-checkmark': !this.isUploading && !this.isFailed,
-                'k-i-exception': !this.isUploading && this.isFailed,
-                'k-i-upload': this.isUploading,
-                'k-i-pause-sm': this.isPaused
-            }">
-        </span>
+        <kendo-icon-wrapper
+            [name]="iconClass"
+            [svgIcon]="SVGIconClass"
+        >
+        </kendo-icon-wrapper>
         {{statusText}}
     `
                 }]
@@ -4272,7 +4384,7 @@ UploadComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
       [disabled]="disabled"
       [actionsLayout]="actionsLayout">
     </kendo-upload-action-buttons>
-  `, isInline: true, components: [{ type: i6.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+  `, isInline: true, components: [{ type: i7.Button, selector: "button[kendoButton], span[kendoButton], kendo-button", inputs: ["toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "role", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { type: UploadStatusTotalComponent, selector: "kendo-upload-status-total", inputs: ["fileList"] }, { type: FileListComponent, selector: "[kendo-upload-file-list]", inputs: ["disabled", "fileList", "fileTemplate", "fileInfoTemplate"] }, { type: UploadActionButtonsComponent, selector: "kendo-upload-action-buttons", inputs: ["disabled", "actionsLayout"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: DropZoneInternalDirective, selector: "\n      [kendoUploadInternalDropZone],\n      [kendoFileSelectInternalDropZone]\n    ", inputs: ["disabled", "multiple", "restrictions"] }, { type: FileSelectDirective, selector: "[kendoFileSelect]", inputs: ["dir", "disabled", "multiple", "restrictions"] }, { type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadComponent, decorators: [{
             type: Component,
             args: [{
@@ -4593,6 +4705,7 @@ class UploadDropZoneComponent extends DropZoneBase {
         super(element, renderer, 'k-external-dropzone-hover');
         this.localization = localization;
         this.hostClass = true;
+        this._svgIcon = uploadIcon;
         this.localizationChangeSubscription = this.localization.changes.subscribe(({ rtl }) => {
             this.direction = rtl ? 'rtl' : 'ltr';
         });
@@ -4600,6 +4713,19 @@ class UploadDropZoneComponent extends DropZoneBase {
     get dirAttribute() {
         return this.direction;
     }
+    /**
+     * Defines an SVGIcon to be rendered inside the DropZone.
+     * The input can take either an [existing Kendo SVG icon](slug:svgicon_list) or a custom one.
+     */
+    set svgIcon(icon) {
+        if (isDevMode() && icon && this.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;
+    }
     /**
      * @hidden
      */
@@ -4611,12 +4737,11 @@ class UploadDropZoneComponent extends DropZoneBase {
      */
     get iconClasses() {
         if (this.icon) {
-            return `k-icon k-i-${this.icon}`;
+            return `${this.icon}`;
         }
-        if (this.iconClass) {
-            return `${this.iconClass}`;
+        if (!this.icon && !this.iconClass) {
+            return 'upload';
         }
-        return 'k-icon k-i-upload';
     }
     ngOnDestroy() {
         if (this.localizationChangeSubscription) {
@@ -4625,26 +4750,29 @@ class UploadDropZoneComponent extends DropZoneBase {
     }
 }
 UploadDropZoneComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadDropZoneComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.LocalizationService }], target: i0.ɵɵFactoryTarget.Component });
-UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadDropZoneComponent, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
+UploadDropZoneComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: UploadDropZoneComponent, selector: "kendo-uploaddropzone", inputs: { zoneId: "zoneId", icon: "icon", iconClass: "iconClass", svgIcon: "svgIcon" }, host: { properties: { "class.k-external-dropzone": "this.hostClass", "attr.dir": "this.dirAttribute" } }, providers: [
         LocalizationService,
         {
             provide: L10N_PREFIX,
             useValue: 'kendo.uploaddropzone'
         }
     ], exportAs: ["kendoUploadDropZone"], usesInheritance: true, ngImport: i0, template: `
-    <ng-container kendoUploadDropZoneLocalizedMessages
-      i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
-      externalDropFilesHere='Drag and drop files here to upload'
-    >
-    </ng-container>
-    <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
-      <span [ngClass]="iconClasses"></span>
-      <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
-      <span class="k-dropzone-note">
-        <ng-content></ng-content>
-      </span>
-    </div>
-  `, isInline: true, directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+        <ng-container kendoUploadDropZoneLocalizedMessages
+            i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
+            externalDropFilesHere='Drag and drop files here to upload'>
+        </ng-container>
+        <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
+            <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="iconClass"
+                [svgIcon]="svgIcon"
+            ></kendo-icon-wrapper>
+            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
+            <span class="k-dropzone-note">
+                <ng-content></ng-content>
+            </span>
+        </div>
+    `, isInline: true, components: [{ type: i4.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: LocalizedMessagesDirective, selector: "\n    [kendoUploadLocalizedMessages],\n    [kendoFileSelectLocalizedMessages],\n    [kendoUploadDropZoneLocalizedMessages]\n  " }, { type: UploadDropZoneDirective, selector: "[kendoUploadDropZone], [kendoFileSelectDropZone]", inputs: ["kendoUploadDropZone"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadDropZoneComponent, decorators: [{
             type: Component,
             args: [{
@@ -4658,19 +4786,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                     ],
                     selector: 'kendo-uploaddropzone',
                     template: `
-    <ng-container kendoUploadDropZoneLocalizedMessages
-      i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
-      externalDropFilesHere='Drag and drop files here to upload'
-    >
-    </ng-container>
-    <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
-      <span [ngClass]="iconClasses"></span>
-      <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
-      <span class="k-dropzone-note">
-        <ng-content></ng-content>
-      </span>
-    </div>
-  `
+        <ng-container kendoUploadDropZoneLocalizedMessages
+            i18n-externalDropFilesHere='kendo.uploaddropzone.externalDropFilesHere|Sets the external drop-zone hint'
+            externalDropFilesHere='Drag and drop files here to upload'>
+        </ng-container>
+        <div class='k-dropzone-inner' [kendoUploadDropZone]="zoneId">
+            <kendo-icon-wrapper
+                [name]="iconClasses"
+                [customFontClass]="iconClass"
+                [svgIcon]="svgIcon"
+            ></kendo-icon-wrapper>
+            <span class="k-dropzone-hint">{{ textFor('externalDropFilesHere') }}</span>
+            <span class="k-dropzone-note">
+                <ng-content></ng-content>
+            </span>
+        </div>
+    `
                 }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.LocalizationService }]; }, propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -4684,6 +4815,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                 type: Input
             }], iconClass: [{
                 type: Input
+            }], svgIcon: [{
+                type: Input
             }] } });
 
 /**
@@ -4728,7 +4861,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         FileListSingleItemComponent,
         FileSelectDirective,
         LocalizedMessagesDirective,
-        TemplateContextDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule], exports: [FileTemplateDirective,
+        TemplateContextDirective], imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule], exports: [FileTemplateDirective,
         FileInfoTemplateDirective,
         CustomMessagesComponent,
         UploadDropZoneDirective,
@@ -4742,7 +4875,7 @@ SharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "
         LocalizedMessagesDirective,
         TemplateContextDirective, CommonModule,
         ButtonsModule] });
-SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, ButtonsModule, ProgressBarModule], CommonModule,
+SharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, imports: [[CommonModule, ButtonsModule, ProgressBarModule, IconsModule], CommonModule,
         ButtonsModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: SharedModule, decorators: [{
             type: NgModule,
@@ -4757,7 +4890,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         CommonModule,
                         ButtonsModule
                     ],
-                    imports: [CommonModule, ButtonsModule, ProgressBarModule]
+                    imports: [CommonModule, ButtonsModule, ProgressBarModule, IconsModule]
                 }]
         }] });
 
@@ -4770,8 +4903,8 @@ const FILESELECT_DECLARATIONS = [
 class FileSelectModule {
 }
 FileSelectModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, declarations: [FileSelectComponent], imports: [SharedModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, FileSelectComponent] });
-FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, imports: [[SharedModule]] });
+FileSelectModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, declarations: [FileSelectComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, FileSelectComponent] });
+FileSelectModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, imports: [[SharedModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: FileSelectModule, decorators: [{
             type: NgModule,
             args: [{
@@ -4780,7 +4913,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         PUBLIC_DIRECTIVES,
                         FILESELECT_DECLARATIONS
                     ],
-                    imports: [SharedModule]
+                    imports: [SharedModule, IconsModule]
                 }]
         }] });
 
@@ -4797,10 +4930,10 @@ class UploadModule {
 UploadModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
 UploadModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, declarations: [UploadComponent,
         UploadActionButtonsComponent,
-        UploadStatusTotalComponent], imports: [SharedModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent,
+        UploadStatusTotalComponent], imports: [SharedModule, IconsModule], exports: [FileTemplateDirective, FileInfoTemplateDirective, CustomMessagesComponent, UploadDropZoneDirective, UploadDropZoneComponent, UploadComponent,
         UploadActionButtonsComponent,
         UploadStatusTotalComponent] });
-UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, imports: [[SharedModule]] });
+UploadModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, imports: [[SharedModule, IconsModule]] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: UploadModule, decorators: [{
             type: NgModule,
             args: [{
@@ -4809,7 +4942,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
                         PUBLIC_DIRECTIVES,
                         UPLOAD_DECLARATIONS
                     ],
-                    imports: [SharedModule]
+                    imports: [SharedModule, IconsModule]
                 }]
         }] });