Refactor #3832 Refactor #3833 - Update icons

components/lib/dropdown/Dropdown.vue

@@ -47,14 +47,20 @@
         >
             <slot name="value" :value="modelValue" :placeholder="placeholder">{{ label === 'p-emptylabel' ? '&nbsp;' : label || 'empty' }}</slot>
         </span>
-        <slot v-if="showClear && modelValue != null" name="clearicon">
+        <slot v-if="showClear && modelValue != null" name="clearicon" :onClick="onClearClick">
             <component :is="clearIcon ? 'i' : 'TimesIcon'" :class="['p-dropdown-clear-icon', clearIcon]" @click="onClearClick" v-bind="clearIconProps" />
         </slot>
         <div class="p-dropdown-trigger">
-            <slot name="indicator">
+            <slot v-if="$slots.indicator" name="indicator"></slot>
-                <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-dropdown-trigger-icon', loadingIcon]" aria-hidden="true" />
+            <template v-else>
-                <component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" />
+                <slot v-if="loading" name="loadingicon" class="p-dropdown-trigger-icon">
-            </slot>
+                    <span v-if="loadingIcon" :class="['p-dropdown-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
+                    <SpinnerIcon v-else class="p-dropdown-trigger-icon" spin aria-hidden="true" />
+                </slot>
+                <slot v-else name="dropdownicon" class="p-dropdown-trigger-icon">
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-dropdown-trigger-icon', dropdownIcon]" aria-hidden="true" />
+                </slot>
+            </template>
         </div>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">

components/lib/fileupload/FileContent.vue

@@ -10,7 +10,7 @@
             <FileUploadButton @click="$emit('remove', index)" text rounded severity="danger" class="p-fileupload-file-remove">
                 <template #icon="iconProps">
                     <component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
-                    <component v-else :is="'TimesIcon'" :class="iconProps.class" aria-hidden="true" />
+                    <TimesIcon v-else :class="iconProps.class" aria-hidden="true" />
                 </template>
             </FileUploadButton>
         </div>

components/lib/fileupload/FileUpload.d.ts

@@ -236,14 +236,17 @@ export interface FileUploadProps {
     showCancelButton?: boolean | undefined;
     /**
      * Icon of the choose button.
+     * @todo
      */
     chooseIcon?: string | undefined;
     /**
      * Icon of the upload button.
+     * @todo
      */
     uploadIcon?: string | undefined;
     /**
      * Icon of the cancel button.
+     * @todo
      */
     cancelIcon?: string | undefined;
     /**

components/lib/galleria/Galleria.d.ts

@@ -212,7 +212,7 @@ export interface GalleriaSlots {
     /**
      * Custom navigator previous item icon template.
      */
-    previtemicon(): VNode[];
+    previousitemicon(): VNode[];
     /**
      * Custom navigator next item icon template.
      */
@@ -220,7 +220,7 @@ export interface GalleriaSlots {
     /**
      * Custom thumbnail previous icon template.
      */
-    prevthumbnailicon(): VNode[];
+    previousthumbnailicon(): VNode[];
     /**
      * Custom thumbnail next item template.
      */

components/lib/galleria/GalleriaItem.vue

@@ -2,13 +2,13 @@
     <div class="p-galleria-item-wrapper">
         <div class="p-galleria-item-container">
             <button v-if="showItemNavigators" v-ripple type="button" :class="navBackwardClass" @click="navBackward($event)" :disabled="isNavBackwardDisabled()">
-                <component :is="templates.itemprevicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
+                <component :is="templates.previousitemicon || 'ChevronLeftIcon'" class="p-galleria-item-prev-icon" />
             </button>
             <div :id="id + '_item_' + activeIndex" class="p-galleria-item" role="group" :aria-label="ariaSlideNumber(activeIndex + 1)" :aria-roledescription="ariaSlideLabel">
                 <component v-if="templates.item" :is="templates.item" :item="activeItem" />
             </div>
             <button v-if="showItemNavigators" v-ripple type="button" :class="navForwardClass" @click="navForward($event)" :disabled="isNavForwardDisabled()">
-                <component :is="templates.itemnexticon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
+                <component :is="templates.nextitemicon || 'ChevronRightIcon'" class="p-galleria-item-next-icon" />
             </button>
             <div v-if="templates['caption']" class="p-galleria-caption">
                 <component v-if="templates.caption" :is="templates.caption" :item="activeItem" />

components/lib/galleria/GalleriaThumbnails.vue

@@ -2,7 +2,7 @@
     <div class="p-galleria-thumbnail-wrapper">
         <div class="p-galleria-thumbnail-container">
             <button v-if="showThumbnailNavigators" v-ripple :class="navBackwardClass" :disabled="isNavBackwardDisabled()" type="button" :aria-label="ariaPrevButtonLabel" @click="navBackward($event)" v-bind="prevButtonProps">
-                <component :is="templates.prevthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
+                <component :is="templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')" class="p-galleria-thumbnail-prev-icon" />
             </button>
             <div class="p-galleria-thumbnail-items-container" :style="{ height: isVertical ? contentHeight : '' }">
                 <div ref="itemsContainer" class="p-galleria-thumbnail-items" role="tablist" @transitionend="onTransitionEnd" @touchstart="onTouchStart($event)" @touchmove="onTouchMove($event)" @touchend="onTouchEnd($event)">

components/lib/image/Image.vue

@@ -2,7 +2,7 @@
     <span :class="containerClass" :style="style">
         <img v-bind="$attrs" :style="imageStyle" :class="imageClass" @error="onError" />
         <button v-if="preview" ref="previewButton" class="p-image-preview-indicator" @click="onImageClick" v-bind="previewButtonProps">
-            <slot name="indicator">
+            <slot name="indicatoricon">
                 <component :is="indicatorIcon ? 'i' : 'EyeIcon'" class="p-image-preview-icon" />
             </slot>
         </button>

components/lib/inlinemessage/InlineMessage.d.ts

@@ -21,6 +21,7 @@ export interface InlineMessageProps {
     severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
     /**
      * Display a custom icon for the message.
+     * @todo
      */
     icon?: string | undefined;
 }
@@ -35,7 +36,7 @@ export interface InlineMessageSlots {
     /**
      * Custom message icon template.
      */
-    messageicon(): VNode[];
+    icon(): VNode[];
 }
 
 export interface InlineMessageEmits {}

components/lib/inlinemessage/InlineMessage.vue

@@ -1,6 +1,6 @@
 <template>
     <div aria-live="polite" :class="containerClass">
-        <slot name="messageicon">
+        <slot name="icon">
             <component :is="icon ? 'span' : iconComponent" :class="['p-inline-message-icon', icon]"></component>
         </slot>
         <span class="p-inline-message-text"><slot>&nbsp;</slot></span>