primevue 3.26.1 → 3.28.0

package/message/message.js

@@ -1,13 +1,20 @@
 this.primevue = this.primevue || {};
-this.primevue.message = (function (Ripple, vue) {
+this.primevue.message = (function (BaseComponent, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+    var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+    var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
+    var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
+    var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
+    var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
         name: 'Message',
+        extends: BaseComponent__default["default"],
         emits: ['close'],
         props: {
             severity: {
@@ -28,11 +35,11 @@ this.primevue.message = (function (Ripple, vue) {
             },
             icon: {
                 type: String,
-                default: null
+                default: undefined
             },
             closeIcon: {
                 type: String,
-                default: 'pi pi-times'
+                default: undefined
             },
             closeButtonProps: {
                 type: null,
@@ -47,7 +54,7 @@ this.primevue.message = (function (Ripple, vue) {
         },
         mounted() {
             if (!this.sticky) {
-                this.x();
+                this.closeAfterDelay();
             }
         },
         methods: {
@@ -55,7 +62,7 @@ this.primevue.message = (function (Ripple, vue) {
                 this.visible = false;
                 this.$emit('close', event);
             },
-            x() {
+            closeAfterDelay() {
                 setTimeout(() => {
                     this.visible = false;
                 }, this.life);
@@ -65,18 +72,13 @@ this.primevue.message = (function (Ripple, vue) {
             containerClass() {
                 return 'p-message p-component p-message-' + this.severity;
             },
-            iconClass() {
-                return [
-                    'p-message-icon pi',
-                    this.icon
-                        ? this.icon
-                        : {
-                              'pi-info-circle': this.severity === 'info',
-                              'pi-check': this.severity === 'success',
-                              'pi-exclamation-triangle': this.severity === 'warn',
-                              'pi-times-circle': this.severity === 'error'
-                          }
-                ];
+            iconComponent() {
+                return {
+                    info: InfoCircleIcon__default["default"],
+                    success: CheckIcon__default["default"],
+                    warn: ExclamationTriangleIcon__default["default"],
+                    error: TimesCircleIcon__default["default"]
+                }[this.severity];
             },
             closeAriaLabel() {
                 return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
@@ -84,14 +86,20 @@ this.primevue.message = (function (Ripple, vue) {
         },
         directives: {
             ripple: Ripple__default["default"]
+        },
+        components: {
+            TimesIcon: TimesIcon__default["default"],
+            InfoCircleIcon: InfoCircleIcon__default["default"],
+            CheckIcon: CheckIcon__default["default"],
+            ExclamationTriangleIcon: ExclamationTriangleIcon__default["default"],
+            TimesCircleIcon: TimesCircleIcon__default["default"]
         }
     };
 
-    const _hoisted_1 = { class: "p-message-wrapper" };
-    const _hoisted_2 = { class: "p-message-text" };
-    const _hoisted_3 = ["aria-label"];
+    const _hoisted_1 = ["aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_TimesIcon = vue.resolveComponent("TimesIcon");
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return (vue.openBlock(), vue.createBlock(vue.Transition, {
@@ -99,19 +107,21 @@ this.primevue.message = (function (Ripple, vue) {
         appear: ""
       }, {
         default: vue.withCtx(() => [
-          vue.withDirectives(vue.createElementVNode("div", {
-            class: vue.normalizeClass($options.containerClass),
+          vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
+            class: $options.containerClass,
             role: "alert",
             "aria-live": "assertive",
             "aria-atomic": "true"
-          }, [
-            vue.createElementVNode("div", _hoisted_1, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass($options.iconClass)
-              }, null, 2),
-              vue.createElementVNode("div", _hoisted_2, [
-                vue.renderSlot(_ctx.$slots, "default")
+          }, _ctx.ptm('root')), [
+            vue.createElementVNode("div", vue.mergeProps({ class: "p-message-wrapper" }, _ctx.ptm('wrapper')), [
+              vue.renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), vue.mergeProps({
+                  class: ['p-message-icon', $props.icon]
+                }, _ctx.ptm('icon')), null, 16, ["class"]))
               ]),
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-message-text" }, _ctx.ptm('text')), [
+                vue.renderSlot(_ctx.$slots, "default")
+              ], 16),
               ($props.closable)
                 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                     key: 0,
@@ -119,16 +129,24 @@ this.primevue.message = (function (Ripple, vue) {
                     "aria-label": $options.closeAriaLabel,
                     type: "button",
                     onClick: _cache[0] || (_cache[0] = $event => ($options.close($event)))
-                  }, $props.closeButtonProps), [
-                    vue.createElementVNode("i", {
-                      class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
-                    }, null, 2)
-                  ], 16, _hoisted_3)), [
+                  }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
+                    vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
+                      ($props.closeIcon)
+                        ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
+                            key: 0,
+                            class: ['p-message-close-icon', $props.closeIcon]
+                          }, _ctx.ptm('buttonIcon')), null, 16))
+                        : (vue.openBlock(), vue.createBlock(_component_TimesIcon, vue.mergeProps({
+                            key: 1,
+                            class: "p-message-close-icon"
+                          }, _ctx.ptm('buttonIcon')), null, 16))
+                    ])
+                  ], 16, _hoisted_1)), [
                     [_directive_ripple]
                   ])
                 : vue.createCommentVNode("", true)
-            ])
-          ], 2), [
+            ], 16)
+          ], 16), [
             [vue.vShow, $data.visible]
           ])
         ]),
@@ -170,4 +188,4 @@ this.primevue.message = (function (Ripple, vue) {
 
     return script;
 
-})(primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.times, primevue.icons.timescircle, primevue.ripple, Vue);

package/message/message.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.message=function(e,t){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Message",emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:null},closeIcon:{type:String,default:"pi pi-times"},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.x()},methods:{close(e){this.visible=!1,this.$emit("close",e)},x(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconClass(){return["p-message-icon pi",this.icon?this.icon:{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:s(e).default}};const n={class:"p-message-wrapper"},a={class:"p-message-text"},l=["aria-label"];return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===s&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),i.render=function(e,s,i,o,r,c){const p=t.resolveDirective("ripple");return t.openBlock(),t.createBlock(t.Transition,{name:"p-message",appear:""},{default:t.withCtx((()=>[t.withDirectives(t.createElementVNode("div",{class:t.normalizeClass(c.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[t.createElementVNode("div",n,[t.createElementVNode("span",{class:t.normalizeClass(c.iconClass)},null,2),t.createElementVNode("div",a,[t.renderSlot(e.$slots,"default")]),i.closable?t.withDirectives((t.openBlock(),t.createElementBlock("button",t.mergeProps({key:0,class:"p-message-close p-link","aria-label":c.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>c.close(e))},i.closeButtonProps),[t.createElementVNode("i",{class:t.normalizeClass(["p-message-close-icon",i.closeIcon])},null,2)],16,l)),[[p]]):t.createCommentVNode("",!0)])],2),[[t.vShow,r.visible]])])),_:3})},i}(primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.message=function(e,t,s,n,o,i,a,l){"use strict";function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=c(e),p=c(t),m=c(s),u=c(n),d=c(o),f=c(i),g=c(a),v={name:"Message",extends:r.default,emits:["close"],props:{severity:{type:String,default:"info"},closable:{type:Boolean,default:!0},sticky:{type:Boolean,default:!0},life:{type:Number,default:3e3},icon:{type:String,default:void 0},closeIcon:{type:String,default:void 0},closeButtonProps:{type:null,default:null}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||this.closeAfterDelay()},methods:{close(e){this.visible=!1,this.$emit("close",e)},closeAfterDelay(){setTimeout((()=>{this.visible=!1}),this.life)}},computed:{containerClass(){return"p-message p-component p-message-"+this.severity},iconComponent(){return{info:u.default,success:p.default,warn:m.default,error:f.default}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:g.default},components:{TimesIcon:d.default,InfoCircleIcon:u.default,CheckIcon:p.default,ExclamationTriangleIcon:m.default,TimesCircleIcon:f.default}};const h=["aria-label"];return function(e,t){void 0===t&&(t={});var s=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===s&&n.firstChild?n.insertBefore(o,n.firstChild):n.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-message-wrapper {\n    display: flex;\n    align-items: center;\n}\n.p-message-close {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-message-close.p-link {\n    margin-left: auto;\n    overflow: hidden;\n    position: relative;\n}\n.p-message-enter-from {\n    opacity: 0;\n}\n.p-message-enter-active {\n    transition: opacity 0.3s;\n}\n.p-message.p-message-leave-from {\n    max-height: 1000px;\n}\n.p-message.p-message-leave-to {\n    max-height: 0;\n    opacity: 0;\n    margin: 0 !important;\n}\n.p-message-leave-active {\n    overflow: hidden;\n    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1), opacity 0.3s, margin 0.15s;\n}\n.p-message-leave-active .p-message-close {\n    display: none;\n}\n"),v.render=function(e,t,s,n,o,i){const a=l.resolveComponent("TimesIcon"),c=l.resolveDirective("ripple");return l.openBlock(),l.createBlock(l.Transition,{name:"p-message",appear:""},{default:l.withCtx((()=>[l.withDirectives(l.createElementVNode("div",l.mergeProps({class:i.containerClass,role:"alert","aria-live":"assertive","aria-atomic":"true"},e.ptm("root")),[l.createElementVNode("div",l.mergeProps({class:"p-message-wrapper"},e.ptm("wrapper")),[l.renderSlot(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(s.icon?"span":i.iconComponent),l.mergeProps({class:["p-message-icon",s.icon]},e.ptm("icon")),null,16,["class"]))])),l.createElementVNode("div",l.mergeProps({class:"p-message-text"},e.ptm("text")),[l.renderSlot(e.$slots,"default")],16),s.closable?l.withDirectives((l.openBlock(),l.createElementBlock("button",l.mergeProps({key:0,class:"p-message-close p-link","aria-label":i.closeAriaLabel,type:"button",onClick:t[0]||(t[0]=e=>i.close(e))},{...s.closeButtonProps,...e.ptm("button")}),[l.renderSlot(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[s.closeIcon?(l.openBlock(),l.createElementBlock("i",l.mergeProps({key:0,class:["p-message-close-icon",s.closeIcon]},e.ptm("buttonIcon")),null,16)):(l.openBlock(),l.createBlock(a,l.mergeProps({key:1,class:"p-message-close-icon"},e.ptm("buttonIcon")),null,16))]))],16,h)),[[c]]):l.createCommentVNode("",!0)],16)],16),[[l.vShow,o.visible]])])),_:3})},v}(primevue.basecomponent,primevue.icons.check,primevue.icons.exclamationtriangle,primevue.icons.infocircle,primevue.icons.times,primevue.icons.timescircle,primevue.ripple,Vue);

package/multiselect/MultiSelect.d.ts

@@ -191,32 +191,32 @@ export interface MultiSelectProps {
     loading?: boolean | undefined;
     /**
      * Icon to display in the checkboxes.
-     * @defaultValue pi pi-check
+     * @deprecated since v3.27.0. Use 'checkboxicon' slot.
      */
     checkboxIcon?: string | undefined;
     /**
      * Icon to display in the dropdown close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
      * Icon to display in the dropdown.
-     * @defaultValue pi pi-chevron-down
+     * @deprecated since v3.27.0. Use 'dropdownicon' slot.
      */
     dropdownIcon?: string | undefined;
     /**
      * Icon to display in filter input.
-     * @defaultValue pi pi-search
+     * @deprecated since v3.27.0. Use 'filtericon' slot.
      */
     filterIcon?: string | undefined;
     /**
      * Icon to display in loading state.
-     * @defaultValue pi pi-spinner pi-spin
+     * @deprecated since v3.27.0. Use 'loadingicon' slot.
      */
     loadingIcon?: string | undefined;
     /**
      * Icon to display in chip remove action.
-     * @defaultValue pi pi-times-circle
+     * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -313,6 +313,7 @@ export interface MultiSelectSlots {
     }): VNode[];
     /**
      * Custom indicator template.
+     * @deprecated since v3.27.0. Use 'loadingicon and dropdownicon' slot.
      */
     indicator(): VNode[];
     /**
@@ -414,6 +415,84 @@ export interface MultiSelectSlots {
          */
         options: any[];
     }): VNode[];
+    /**
+     * Custom remove token icon template.
+     */
+    removetokenicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+        /**
+         * Remove token icon function.
+         */
+        onClick: void;
+    }): VNode[];
+    /**
+     * Custom header checkbox icon template.
+     * @param {Object} scope - header checkbox icon slot's params.
+     */
+    headercheckboxicon(scope: {
+        /**
+         * Options of the loader items for virtualscroller
+         */
+        allSelected: boolean;
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom filter icon template.
+     */
+    filtericon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    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.
+     */
+    itemcheckboxicon(scope: {
+        /**
+         * 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[];
 }
 
 /**

package/multiselect/MultiSelect.vue

@@ -33,7 +33,10 @@
                             <slot name="chip" :value="item">
                                 <span class="p-multiselect-token-label">{{ getLabelByValue(item) }}</span>
                             </slot>
-                            <span v-if="!disabled" :class="['p-multiselect-token-icon', removeTokenIcon]" @click.stop="removeOption($event, item)"></span>
+                            <slot v-if="!disabled" name="removetokenicon" class="p-multiselect-token-icon" :onClick="(event) => 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>
                     </template>
@@ -41,8 +44,12 @@
             </div>
         </div>
         <div class="p-multiselect-trigger">
-            <slot name="indicator">
-                <span :class="dropdownIconClass" aria-hidden="true"></span>
+            <slot v-if="loading" name="loadingicon" class="p-multiselect-trigger-icon">
+                <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>
         </div>
         <Portal :appendTo="appendTo">
@@ -56,7 +63,9 @@
                                 <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 }]">
-                                <span :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]"></span>
+                                <slot name="headercheckboxicon" :allSelected="allSelected" class="p-checkbox-icon">
+                                    <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: allSelected }]" />
+                                </slot>
                             </div>
                         </div>
                         <div v-if="filter" class="p-multiselect-filter-container">
@@ -76,13 +85,17 @@
                                 @input="onFilterChange"
                                 v-bind="filterInputProps"
                             />
-                            <span :class="['p-multiselect-filter-icon', filterIcon]" />
+                            <slot name="filtericon" class="p-multiselect-filter-icon">
+                                <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="['p-multiselect-filter-icon', filterIcon]" />
+                            </slot>
                         </div>
                         <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible">
                             {{ filterResultMessageText }}
                         </span>
                         <button v-ripple class="p-multiselect-close p-link" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="closeButtonProps">
-                            <span :class="['p-multiselect-close-icon', closeIcon]" />
+                            <slot name="closeicon" class="p-multiselect-close-icon">
+                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="['p-multiselect-close-icon', closeIcon]" />
+                            </slot>
                         </button>
                     </div>
                     <div class="p-multiselect-items-wrapper" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }">
@@ -110,7 +123,9 @@
                                         >
                                             <div class="p-checkbox p-component">
                                                 <div :class="['p-checkbox-box', { 'p-highlight': isSelected(option) }]">
-                                                    <span :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]"></span>
+                                                    <slot name="itemcheckboxicon" :selected="isSelected(option)" class="p-checkbox-icon">
+                                                        <component :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="['p-checkbox-icon', { [checkboxIcon]: isSelected(option) }]" />
+                                                    </slot>
                                                 </div>
                                             </div>
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">
@@ -147,6 +162,12 @@
 
 <script>
 import { FilterService } from 'primevue/api';
+import CheckIcon from 'primevue/icons/check';
+import ChevronDownIcon from 'primevue/icons/chevrondown';
+import SearchIcon from 'primevue/icons/search';
+import SpinnerIcon from 'primevue/icons/spinner';
+import TimesIcon from 'primevue/icons/times';
+import TimesCircleIcon from 'primevue/icons/timescircle';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import Ripple from 'primevue/ripple';
@@ -240,27 +261,27 @@ export default {
         },
         checkboxIcon: {
             type: String,
-            default: 'pi pi-check'
+            default: undefined
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         dropdownIcon: {
             type: String,
-            default: 'pi pi-chevron-down'
+            default: undefined
         },
         filterIcon: {
             type: String,
-            default: 'pi pi-search'
+            default: undefined
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         removeTokenIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         },
         selectAll: {
             type: Boolean,
@@ -1060,9 +1081,6 @@ export default {
                 }
             ];
         },
-        dropdownIconClass() {
-            return ['p-multiselect-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
-        },
         panelStyleClass() {
             return [
                 'p-multiselect-panel p-component',
@@ -1191,7 +1209,13 @@ export default {
     },
     components: {
         VirtualScroller: VirtualScroller,
-        Portal: Portal
+        Portal: Portal,
+        TimesIcon: TimesIcon,
+        SearchIcon: SearchIcon,
+        TimesCircleIcon: TimesCircleIcon,
+        ChevronDownIcon: ChevronDownIcon,
+        SpinnerIcon: SpinnerIcon,
+        CheckIcon: CheckIcon
     }
 };
 </script>