Refactor #3832 Refactor #3833 - icon & .d.ts. updates

components/lib/datatable/BodyCell.vue

@@ -34,8 +34,12 @@
         <template v-else-if="columnProp('expander')">
             <button v-ripple class="p-row-toggler p-link" type="button" :aria-expanded="isRowExpanded" :aria-controls="ariaControls" :aria-label="expandButtonAriaLabel" @click="toggleRow">
                 <component v-if="column.children && column.children.rowtogglericon" :is="column.children.rowtogglericon" :rowExpanded="isRowExpanded" />
-                <component v-else-if="column.children && !column.children.rowtogglericon && isRowExpanded" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" />
+                <template v-else>
-                <component v-else-if="column.children && !column.children.rowtogglericon && !isRowExpanded" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" />
+                    <span v-if="isRowExpanded && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                    <ChevronDownIcon v-else-if="isRowExpanded && !expandedRowIcon" class="p-row-toggler-icon" />
+                    <span v-else-if="!isRowExpanded && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                    <ChevronRightIcon v-else-if="!isRowExpanded && !collapsedRowIcon" class="p-row-toggler-icon" />
+                </template>
             </button>
         </template>
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">

components/lib/datatable/HeaderCheckbox.vue

@@ -4,7 +4,8 @@
             <input ref="input" type="checkbox" :checked="checked" :disabled="disabled" :tabindex="disabled ? null : '0'" :aria-label="headerCheckboxAriaLabel" @focus="onFocus($event)" @blur="onBlur($event)" />
         </div>
         <div ref="box" :class="['p-checkbox-box p-component', { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]">
-            <component :is="headerCheckboxIconTemplate || 'CheckIcon'" :checked="checked" class="p-checkbox-icon" />
+            <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="checked" class="p-checkbox-icon" />
+            <CheckIcon v-else class="p-checkbox-icon" />
         </div>
     </div>
 </template>

components/lib/datatable/TableBody.vue

@@ -12,8 +12,12 @@
                     <td :colspan="columnsLength - 1">
                         <button v-if="expandableRowGroups" class="p-row-toggler p-link" @click="onRowGroupToggle($event, rowData)" type="button">
                             <component v-if="templates['rowgrouptogglericon']" :is="templates['rowgrouptogglericon']" :expanded="isRowGroupExpanded(rowData)" />
-                            <component v-else-if="!templates['rowgrouptogglericon'] && isRowGroupExpanded(rowData)" :is="expandedRowIcon ? 'span' : 'ChevronDownIcon'" class="p-row-toggler-icon" />
+                            <template v-else>
-                            <component v-else-if="!templates['rowgrouptogglericon'] && !isRowGroupExpanded(rowData)" :is="collapsedRowIcon ? 'span' : 'ChevronRightIcon'" class="p-row-toggler-icon" />
+                                <span v-if="isRowGroupExpanded(rowData) && expandedRowIcon" :class="['p-row-toggler-icon', expandedRowIcon]" />
+                                <ChevronDownIcon v-else-if="isRowGroupExpanded(rowData) && !expandedRowIcon" class="p-row-toggler-icon" />
+                                <span v-else-if="!isRowGroupExpanded(rowData) && collapsedRowIcon" :class="['p-row-toggler-icon', collapsedRowIcon]" />
+                                <ChevronRightIcon v-else-if="!isRowGroupExpanded(rowData) && !collapsedRowIcon" class="p-row-toggler-icon" />
+                            </template>
                         </button>
                         <component :is="templates['groupheader']" :data="rowData" :index="getRowIndex(index)" />
                     </td>

components/lib/dialog/Dialog.d.ts

@@ -146,14 +146,17 @@ export interface DialogProps {
     style?: any;
     /**
      * Icon to display in the dialog close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dialog maximize button when dialog is not maximized.
+     * @deprecated since v3.27.0. Use 'maximizeicon' slot.
      */
     maximizeIcon?: string | undefined;
     /**
-     * Icon to display in the dialog maximize button when dialog is maximized.
+     * Icon to display in the dialog maximize button when dialog is minimized.
+     * @deprecated since v3.27.0. Use 'minimizeicon' slot.
      */
     minimizeIcon?: string | undefined;
 }
@@ -179,8 +182,8 @@ export interface DialogSlots {
      */
     closeicon(): VNode[];
     /**
-     * Custom maximizeicon icon template of dialog.
+     * Custom maximize icon template of dialog.
-     * @param {Object} scope - maximizeicon icon slot's params.
+     * @param {Object} scope - maximize icon slot's params.
      */
     maximizeicon(scope: {
         /**

components/lib/dropdown/Dropdown.d.ts

@@ -157,6 +157,7 @@ export interface DropdownProps {
     filterInputProps?: InputHTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLElement to the clear icon inside the component.
+     * @deprecated since v3.26.0. Use 'pt' peroperty.
      */
     clearIconProps?: HTMLAttributes | undefined;
     /**
@@ -171,18 +172,22 @@ export interface DropdownProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in clear button.
+     * @deprecated since v3.27.0. Use 'clearicon' slot.
      */
     clearIcon?: string | undefined;
     /**
      * Icon to display in the dropdown.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in filter input.
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**
      * Icon to display in loading state.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
@@ -369,6 +374,40 @@ export interface DropdownSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom clear icon template.
+     * @param {Object} scope - clear icon slot's params.
+     */
+    clearicon(scope: {
+        /**
+         * Clear icon click function.
+         */
+        onClick: void;
+    }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     * @param {Object} scope - dropdown icon slot's params.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the component
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the component
+         */
+        class: any;
+    }): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(): VNode[];
 }
 
 /**

components/lib/fileupload/FileUpload.d.ts

@@ -236,17 +236,17 @@ export interface FileUploadProps {
     showCancelButton?: boolean | undefined;
     /**
      * Icon of the choose button.
-     * @todo
+     * @deprecated since v3.27.0. Use 'chooseicon' slot.
      */
     chooseIcon?: string | undefined;
     /**
      * Icon of the upload button.
-     * @todo
+     * @deprecated since v3.27.0. Use 'updateicon' slot.
      */
     uploadIcon?: string | undefined;
     /**
      * Icon of the cancel button.
-     * @todo
+     * @deprecated since v3.27.0. Use 'cancelicon' slot.
      */
     cancelIcon?: string | undefined;
     /**

components/lib/image/Image.d.ts

@@ -29,6 +29,7 @@ export interface ImageProps {
     imageClass?: any;
     /**
      * Custom indicator icon.
+     * @deprecated since v3.27.0. Use 'indicator' slot.
      */
     indicatorIcon?: string;
 }

components/lib/inlinemessage/InlineMessage.d.ts

@@ -21,7 +21,7 @@ export interface InlineMessageProps {
     severity?: 'success' | 'info' | 'warn' | 'error' | string | undefined;
     /**
      * Display a custom icon for the message.
-     * @todo
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
 }

components/lib/inplace/Inplace.d.ts

@@ -31,6 +31,7 @@ export interface InplaceProps {
     disabled?: boolean | undefined;
     /**
      * Icon to display in the close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
@@ -55,6 +56,10 @@ export interface InplaceSlots {
      * Custom content template.
      */
     content(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**

components/lib/inputnumber/InputNumber.d.ts

@@ -73,10 +73,12 @@ export interface InputNumberProps {
     decrementButtonClass?: string | undefined;
     /**
      * Style class of the increment button.
+     * @deprecated since v3.27.0. Use 'incrementbuttonicon' slot.
      */
     incrementButtonIcon?: string | undefined;
     /**
      * Style class of the decrement button.
+     * @deprecated since v3.27.0. Use 'decrementbuttonicon' slot.
      */
     decrementButtonIcon?: string | undefined;
     /**

components/lib/listbox/Listbox.d.ts

@@ -169,7 +169,7 @@ export interface ListboxProps {
     tabindex?: number | string | undefined;
     /**
      * Icon to display in filter input.
-     * @defaultValue ß
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**

components/lib/message/Message.d.ts

@@ -40,10 +40,12 @@ export interface MessageProps {
     icon?: string | undefined;
     /**
      * Icon to display in the message close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the close button.
+     * @deprecated since v3.26.0. Use 'pt' property.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
 }
@@ -59,11 +61,21 @@ export interface MessageSlots {
     /**
      * Custom message icon template.
      */
-    messageicon(): VNode[];
+    messageicon(scope: {
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom close icon template.
      */
-    closeicon(): VNode[];
+    closeicon(scope: {
+        /**
+         * Style class of the item icon element.
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

components/lib/message/Message.vue

@@ -2,15 +2,16 @@
     <transition name="p-message" appear>
         <div v-show="visible" :class="containerClass" role="alert" aria-live="assertive" aria-atomic="true">
             <div class="p-message-wrapper">
-                <slot name="messageicon">
+                <slot name="messageicon" class="p-message-icon">
                     <component :is="icon ? 'span' : iconComponent" :class="['p-message-icon', icon]"></component>
                 </slot>
                 <div class="p-message-text">
                     <slot></slot>
                 </div>
                 <button v-if="closable" v-ripple class="p-message-close p-link" :aria-label="closeAriaLabel" type="button" @click="close($event)" v-bind="closeButtonProps">
-                    <slot name="closeicon">
+                    <slot name="closeicon" class="p-message-close-icon">
-                        <component :is="closeIcon ? 'i' : 'TimesIcon'" :class="['p-message-close-icon', closeIcon]"></component>
+                        <i v-if="closeIcon" :class="['p-message-close-icon', closeIcon]" />
+                        <TimesIcon v-else class="p-message-close-icon" />
                     </slot>
                 </button>
             </div>

components/lib/multiselect/MultiSelect.d.ts

@@ -191,26 +191,32 @@ export interface MultiSelectProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in the checkboxes.
+     * @deprecated since v3.27.0. Use 'checkboxicon' slot.
      */
     checkboxIcon?: string | undefined;
     /**
      * Icon to display in the dropdown close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dropdown.
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in filter input.
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**
      * Icon to display in loading state.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in chip remove action.
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -307,6 +313,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'loadingicon and dropdownicon' slot.
      */
     indicator(): VNode[];
     /**
@@ -411,7 +418,16 @@ export interface MultiSelectSlots {
     /**
      * Custom remove token icon template.
      */
-    removetokenicon(): VNode[];
+    removetokenicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+        /**
+         * Remove token icon function.
+         */
+        onClick: string;
+    }): VNode[];
     /**
      * Custom header checkbox icon template.
      * @param {Object} scope - header checkbox icon slot's params.
@@ -421,15 +437,29 @@ export interface MultiSelectSlots {
          * Options of the loader items for virtualscroller
          */
         allSelected: boolean;
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
     }): VNode[];
     /**
      * Custom filter icon template.
      */
-    filtericon(): VNode[];
+    filtericon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom close icon template.
      */
-    closeicon(): VNode[];
+    closeicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom item checkbox icon template.
      * @param {Object} scope - header checkbox icon slot's params.
@@ -439,6 +469,29 @@ export interface MultiSelectSlots {
          * Options of the loader items for virtualscroller
          */
         selected: boolean;
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom dropdown icon template.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
     }): VNode[];
 }
 

components/lib/multiselect/MultiSelect.vue

@@ -33,8 +33,9 @@
                             <slot name="chip" :value="item">
                                 <span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
                             </slot>
-                            <slot v-if="!disabled" name="removetokenicon">
+                            <slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => removeOption(event, item)">
-                                <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
+                                <span v-if="removeTokenIcon" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)" />
+                                <TimesCircleIcon v-else class="p-multiselect-token-icon" @click.stop="removeOption($event, item)" />
                             </slot>
                         </div>
                         <template v-if="!modelValue || modelValue.length === 0">{{ placeholder || 'empty' }}</template>
@@ -43,10 +44,16 @@
             </div>
         </div>
         <div class="p-multiselect-trigger">
-            <slot name="indicator">
+            <slot v-if="$slots.indicator" name="indicator"></slot>
-                <component v-if="loading" :is="loadingIcon ? 'span' : 'SpinnerIcon'" spin :class="['p-multiselect-trigger-icon', loadingIcon]" aria-hidden="true" />
+            <template v-else>
-                <component v-else :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-trigger-icon', dropdownIcon]" aria-hidden="true" />
+                <slot v-if="loading" name="loadingicon" class="p-multiselect-trigger-icon">
-            </slot>
+                    <span v-if="loadingIcon" :class="['p-multiselect-trigger-icon pi-spin', loadingIcon]" aria-hidden="true" />
+                    <SpinnerIcon v-else class="p-multiselect-trigger-icon" spin aria-hidden="true" />
+                </slot>
+                <slot v-else name="dropdownicon" class="p-multiselect-trigger-icon">
+                    <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="['p-multiselect-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">
@@ -59,7 +66,7 @@
                                 <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" />
                             </div>
                             <div :class="['p-checkbox-box', { 'p-highlight': allSelected, 'p-focus': headerCheckboxFocused }]">
-                                <slot name="headercheckboxicon" :allSelected="allSelected">
+                                <slot name="headercheckboxicon" :allSelected="allSelected" class="p-checkbox-icon">
                                     <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
                                 </slot>
                             </div>
@@ -81,7 +88,7 @@
                                 @input="onFilterChange"
                                 v-bind="filterInputProps"
                             />
-                            <slot name="filtericon">
+                            <slot name="filtericon" class="p-multiselect-filter-icon">
                                 <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
                             </slot>
                         </div>
@@ -89,7 +96,7 @@
                             {{ filterResultMessageText }}
                         </span>
                         <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
-                            <slot name="closeicon">
+                            <slot name="closeicon" class="p-multiselect-close-icon">
                                 <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
                             </slot>
                         </button>
@@ -119,7 +126,7 @@
                                         >
                                             <div class="p-checkbox p-component">
                                                 <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
-                                                    <slot name="itemcheckboxicon" :selected="isSelected(option)">
+                                                    <slot name="itemcheckboxicon" :selected="isSelected(option)" class="p-checkbox-icon">
                                                         <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
                                                     </slot>
                                                 </div>

components/lib/overlaypanel/OverlayPanel.d.ts

@@ -67,6 +67,7 @@ export interface OverlayPanelProps {
     breakpoints?: OverlayPanelBreakpoints;
     /**
      * Icon to display in the overlaypanel close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
 }

components/lib/password/Password.d.ts

@@ -61,10 +61,12 @@ export interface PasswordProps extends InputHTMLAttributes {
     toggleMask?: boolean | undefined;
     /**
      * Icon to hide displaying the password as plain text.
+     * @deprecated since v3.27.0. Use 'hideicon' slot.
      */
     hideIcon?: string | undefined;
     /**
      * Icon to show displaying the password as plain text.
+     * @deprecated since v3.27.0. Use 'showicon' slot.
      */
     showIcon?: string | undefined;
     /**
@@ -142,11 +144,21 @@ export interface PasswordSlots {
     /**
      * Custom hide icon template.
      */
-    hideicon(): VNode[];
+    hideicon(scope: {
+        /**
+         * Hide icon click event
+         */
+        onClick(): void;
+    }): VNode[];
     /**
      * Custom show icon template.
      */
-    showicon(): VNode[];
+    showicon(scope: {
+        /**
+         * Show icon click event
+         */
+        onClick(): void;
+    }): VNode[];
 }
 
 /**

components/lib/password/Password.vue

@@ -21,10 +21,10 @@
             @invalid="onInvalid"
             v-bind="inputProps"
         />
-        <slot v-if="toggleMask && unmasked" name="hideicon">
+        <slot v-if="toggleMask && unmasked" name="hideicon" :onClick="() => onMaskToggle">
             <component :is="hideIcon ? 'i' : 'EyeSlashIcon'" :class="hideIcon" @click="onMaskToggle" />
         </slot>
-        <slot v-if="toggleMask && !unmasked" name="showicon">
+        <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="() => onMaskToggle">
             <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" />
         </slot>
         <span class="p-hidden-accessible" aria-live="polite">

components/lib/rating/Rating.d.ts

@@ -59,14 +59,17 @@ export interface RatingProps {
     cancel?: boolean | undefined;
     /**
      * Icon for the on state.
+     * @deprecated since v3.27.0. Use 'onicon' slot.
      */
     onIcon?: string | undefined;
     /**
      * Icon for the off state.
+     * @deprecated since v3.27.0. Use 'officon' slot.
      */
     offIcon?: string | undefined;
     /**
      * Icon for the cancelable state.
+     * @deprecated since v3.27.0. Use 'cancelicon' slot.
      */
     cancelIcon?: string | undefined;
 }

components/lib/scrolltop/ScrollTop.d.ts

@@ -41,6 +41,7 @@ export interface ScrollTopProps {
 export interface ScrollTopSlots {
     /**
      * Custom scrolltop icon template.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon(): VNode[];
 }

components/lib/sidebar/Sidebar.d.ts

@@ -46,6 +46,7 @@ export interface SidebarProps {
     showCloseIcon?: boolean | undefined;
     /**
      * Icon to display in the sidebar close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**

components/lib/speeddial/SpeedDial.d.ts

@@ -93,10 +93,12 @@ export interface SpeedDialProps {
     maskClass?: string | undefined;
     /**
      * Show icon of the button element.
+     * @deprecated since v3.27.0. Use 'showicon' slot.
      */
     showIcon?: string | undefined;
     /**
      * Hide icon of the button element.
+     * @deprecated since v3.27.0. Use 'hideicon' slot.
      */
     hideIcon?: string | undefined;
     /**
@@ -152,6 +154,16 @@ export interface SpeedDialSlots {
          */
         toggle(): void;
     }): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         *
+         */
+        visible: boolean;
+    }): VNode[];
 }
 
 /**

components/lib/splitbutton/SplitButton.d.ts

@@ -21,6 +21,7 @@ export interface SplitButtonProps {
     label?: string | undefined;
     /**
      * Name of the icon.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
     /**
@@ -66,6 +67,7 @@ export interface SplitButtonProps {
     menuButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * Name of the menu button icon.
+     * @deprecated since v3.27.0. Use 'menubuttonicon' slot.
      */
     menuButtonIcon?: string | undefined;
     /**
@@ -111,6 +113,10 @@ export interface SplitButtonSlots {
      * Button part of the content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom menu button icon template.
+     */
+    icon(): VNode[];
     /**
      * Custom menu button icon template.
      */

components/lib/tabview/TabView.d.ts

@@ -152,11 +152,13 @@ export interface TabViewProps {
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
     /**
-     * Prev icon of the scrollable tabview.
+     * Previous icon of the scrollable tabview.
+     * @deprecated since v3.27.0. Use 'previousicon' slot.
      */
     prevIcon?: string | undefined;
     /**
      * Next icon of the scrollable tabview.
+     * @deprecated since v3.27.0. Use 'next' slot.
      */
     nextIcon?: string | undefined;
     /**
@@ -177,7 +179,7 @@ export interface TabViewSlots {
     /**
      * Previous button icon template for the scrollable component.
      */
-    previcon(): VNode[];
+    previousicon(): VNode[];
     /**
      * Next button icon template for the scrollable component.
      */

components/lib/tag/Tag.d.ts

@@ -29,6 +29,7 @@ export interface TagProps {
     rounded?: boolean | undefined;
     /**
      * Icon of the tag to display next to the value.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
 }
@@ -41,6 +42,10 @@ export interface TagSlots {
      * Custom content template
      */
     default(): VNode[];
+    /**
+     * Custom icon template
+     */
+    icon(): VNode[];
 }
 
 /**

components/lib/toast/Toast.d.ts

@@ -95,26 +95,32 @@ export interface ToastProps {
     breakpoints?: ToastBreakpointsType;
     /**
      * Icon to display in the toast close button.
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the toast with info severity.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     infoIcon?: string | undefined;
     /**
      * Icon to display in the toast with warn severity.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     warnIcon?: string | undefined;
     /**
      * Icon to display in the toast with error severity.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     errorIcon?: string | undefined;
     /**
      * Icon to display in the toast with success severity.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     successIcon?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the close button.
+     * @deprecated since v3.26.0. Use 'pt' property.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
 }

components/lib/togglebutton/ToggleButton.d.ts

@@ -7,7 +7,7 @@
  * @module togglebutton
  *
  */
-import { InputHTMLAttributes } from 'vue';
+import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
@@ -21,10 +21,12 @@ export interface ToggleButtonProps {
     modelValue?: boolean | undefined;
     /**
      * Icon for the on state.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     onIcon?: string | undefined;
     /**
      * Icon for the off state.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     offIcon?: string | undefined;
     /**
@@ -80,7 +82,21 @@ export interface ToggleButtonProps {
 /**
  * Defines valid slots in ToggleButton component.
  */
-export interface ToggleButtonSlots {}
+export interface ToggleButtonSlots {
+    /**
+     * Custom icon template.
+     */
+    icon(scope: {
+        /**
+         * Current value
+         */
+        value: any;
+        /**
+         * Icon style class
+         */
+        class: any;
+    }): VNode[];
+}
 
 /**
  * Defines valid emits in ToggleButton component.

components/lib/tree/Tree.d.ts

@@ -123,6 +123,7 @@ export interface TreeProps {
     loading?: boolean | undefined;
     /**
      * Icon to display when tree is loading.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**

components/lib/treeselect/TreeSelect.d.ts

@@ -150,14 +150,6 @@ export interface TreeSelectSlots {
      * Custom indicator template.
      */
     indicator(): VNode[];
-    /**
-     * Custom loading icon template.
-     */
-    loadingicon(): VNode[];
-    /**
-     * Custom search icon template.
-     */
-    searchicon(): VNode[];
     /**
      * Custom item toggler icon template.
      * @param {Object} scope - item toggler icon slot's params.

components/lib/treeselect/TreeSelect.vue

@@ -69,12 +69,6 @@
                             <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
                                 <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
                             </template>
-                            <template v-if="$slots.loadingicon" #loadingicon>
-                                <slot name="loadingicon" />
-                            </template>
-                            <template v-if="$slots.searchicon" #searchicon>
-                                <slot name="searchicon" />
-                            </template>
                         </TSTree>
                         <div v-if="emptyOptions" class="p-treeselect-empty-message">
                             <slot name="empty">{{ emptyMessageText }}</slot>

components/lib/treetable/TreeTable.d.ts

@@ -259,6 +259,7 @@ export interface TreeTableProps {
     loading?: boolean | undefined;
     /**
      * The icon to show while indicating data load is in progress.
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**

components/lib/tristatecheckbox/TriStateCheckbox.d.ts

@@ -34,6 +34,7 @@ export interface TriStateCheckboxProps {
     inputId?: string | undefined;
     /**
      * Uses to pass all properties of the HTMLInputElement to the focusable input element inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property.
      */
     inputProps?: InputHTMLAttributes | undefined;
     /**