primevue 3.26.1 → 3.27.0

package/message/message.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.message = (function (Ripple, vue) {
+this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    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 = {
@@ -28,11 +33,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 +52,7 @@ this.primevue.message = (function (Ripple, vue) {
         },
         mounted() {
             if (!this.sticky) {
-                this.x();
+                this.closeAfterDelay();
             }
         },
         methods: {
@@ -55,7 +60,7 @@ this.primevue.message = (function (Ripple, vue) {
                 this.visible = false;
                 this.$emit('close', event);
             },
-            x() {
+            closeAfterDelay() {
                 setTimeout(() => {
                     this.visible = false;
                 }, this.life);
@@ -65,18 +70,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,6 +84,13 @@ 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"]
         }
     };
 
@@ -92,6 +99,7 @@ this.primevue.message = (function (Ripple, vue) {
     const _hoisted_3 = ["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, {
@@ -106,9 +114,11 @@ this.primevue.message = (function (Ripple, vue) {
             "aria-atomic": "true"
           }, [
             vue.createElementVNode("div", _hoisted_1, [
-              vue.createElementVNode("span", {
-                class: vue.normalizeClass($options.iconClass)
-              }, null, 2),
+              vue.renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
+                  class: vue.normalizeClass(['p-message-icon', $props.icon])
+                }, null, 8, ["class"]))
+              ]),
               vue.createElementVNode("div", _hoisted_2, [
                 vue.renderSlot(_ctx.$slots, "default")
               ]),
@@ -120,9 +130,17 @@ this.primevue.message = (function (Ripple, vue) {
                     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)
+                    vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
+                      ($props.closeIcon)
+                        ? (vue.openBlock(), vue.createElementBlock("i", {
+                            key: 0,
+                            class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
+                          }, null, 2))
+                        : (vue.openBlock(), vue.createBlock(_component_TimesIcon, {
+                            key: 1,
+                            class: "p-message-close-icon"
+                          }))
+                    ])
                   ], 16, _hoisted_3)), [
                     [_directive_ripple]
                   ])
@@ -170,4 +188,4 @@ this.primevue.message = (function (Ripple, vue) {
 
     return script;
 
-})(primevue.ripple, Vue);
+})(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,s,t,n,i,o,a){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=l(e),r=l(s),p=l(t),m=l(n),u=l(i),d={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: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:p.default,success:c.default,warn:r.default,error:u.default}[this.severity]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{ripple:l(o).default},components:{TimesIcon:m.default,InfoCircleIcon:p.default,CheckIcon:c.default,ExclamationTriangleIcon:r.default,TimesCircleIcon:u.default}};const f={class:"p-message-wrapper"},v={class:"p-message-text"},g=["aria-label"];return function(e,s){void 0===s&&(s={});var t=s.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===t&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.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"),d.render=function(e,s,t,n,i,o){const l=a.resolveComponent("TimesIcon"),c=a.resolveDirective("ripple");return a.openBlock(),a.createBlock(a.Transition,{name:"p-message",appear:""},{default:a.withCtx((()=>[a.withDirectives(a.createElementVNode("div",{class:a.normalizeClass(o.containerClass),role:"alert","aria-live":"assertive","aria-atomic":"true"},[a.createElementVNode("div",f,[a.renderSlot(e.$slots,"messageicon",{class:"p-message-icon"},(()=>[(a.openBlock(),a.createBlock(a.resolveDynamicComponent(t.icon?"span":o.iconComponent),{class:a.normalizeClass(["p-message-icon",t.icon])},null,8,["class"]))])),a.createElementVNode("div",v,[a.renderSlot(e.$slots,"default")]),t.closable?a.withDirectives((a.openBlock(),a.createElementBlock("button",a.mergeProps({key:0,class:"p-message-close p-link","aria-label":o.closeAriaLabel,type:"button",onClick:s[0]||(s[0]=e=>o.close(e))},t.closeButtonProps),[a.renderSlot(e.$slots,"closeicon",{class:"p-message-close-icon"},(()=>[t.closeIcon?(a.openBlock(),a.createElementBlock("i",{key:0,class:a.normalizeClass(["p-message-close-icon",t.closeIcon])},null,2)):(a.openBlock(),a.createBlock(l,{key:1,class:"p-message-close-icon"}))]))],16,g)),[[c]]):a.createCommentVNode("",!0)])],2),[[a.vShow,i.visible]])])),_:3})},d}(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: string;
+    }): 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>

package/multiselect/multiselect.cjs.js

@@ -1,6 +1,12 @@
 'use strict';
 
 var api = require('primevue/api');
+var CheckIcon = require('primevue/icons/check');
+var ChevronDownIcon = require('primevue/icons/chevrondown');
+var SearchIcon = require('primevue/icons/search');
+var SpinnerIcon = require('primevue/icons/spinner');
+var TimesIcon = require('primevue/icons/times');
+var TimesCircleIcon = require('primevue/icons/timescircle');
 var OverlayEventBus = require('primevue/overlayeventbus');
 var Portal = require('primevue/portal');
 var Ripple = require('primevue/ripple');
@@ -10,6 +16,12 @@ var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
+var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
+var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
+var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
+var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
 var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
 var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
@@ -102,27 +114,27 @@ var script = {
         },
         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,
@@ -916,9 +928,6 @@ var script = {
                 }
             ];
         },
-        dropdownIconClass() {
-            return ['p-multiselect-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
-        },
         panelStyleClass() {
             return [
                 'p-multiselect-panel p-component',
@@ -1047,7 +1056,13 @@ var script = {
     },
     components: {
         VirtualScroller: VirtualScroller__default["default"],
-        Portal: Portal__default["default"]
+        Portal: Portal__default["default"],
+        TimesIcon: TimesIcon__default["default"],
+        SearchIcon: SearchIcon__default["default"],
+        TimesCircleIcon: TimesCircleIcon__default["default"],
+        ChevronDownIcon: ChevronDownIcon__default["default"],
+        SpinnerIcon: SpinnerIcon__default["default"],
+        CheckIcon: CheckIcon__default["default"]
     }
 };
 
@@ -1102,6 +1117,8 @@ const _hoisted_21 = {
 };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TimesCircleIcon = vue.resolveComponent("TimesCircleIcon");
+  const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
   const _component_VirtualScroller = vue.resolveComponent("VirtualScroller");
   const _component_Portal = vue.resolveComponent("Portal");
   const _directive_ripple = vue.resolveDirective("ripple");
@@ -1155,11 +1172,23 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                         vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.getLabelByValue(item)), 1)
                       ]),
                       (!$props.disabled)
-                        ? (vue.openBlock(), vue.createElementBlock("span", {
+                        ? vue.renderSlot(_ctx.$slots, "removetokenicon", {
                             key: 0,
-                            class: vue.normalizeClass(['p-multiselect-token-icon', $props.removeTokenIcon]),
-                            onClick: vue.withModifiers($event => ($options.removeOption($event, item)), ["stop"])
-                          }, null, 10, _hoisted_5))
+                            class: "p-multiselect-token-icon",
+                            onClick: (event) => $options.removeOption(event, item)
+                          }, () => [
+                            ($props.removeTokenIcon)
+                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  key: 0,
+                                  class: vue.normalizeClass(['p-multiselect-token-icon', $props.removeTokenIcon]),
+                                  onClick: vue.withModifiers($event => ($options.removeOption($event, item)), ["stop"])
+                                }, null, 10, _hoisted_5))
+                              : (vue.openBlock(), vue.createBlock(_component_TimesCircleIcon, {
+                                  key: 1,
+                                  class: "p-multiselect-token-icon",
+                                  onClick: vue.withModifiers($event => ($options.removeOption($event, item)), ["stop"])
+                                }, null, 8, ["onClick"]))
+                          ])
                         : vue.createCommentVNode("", true)
                     ]))
                   }), 128)),
@@ -1174,12 +1203,33 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       ], 2)
     ]),
     vue.createElementVNode("div", _hoisted_6, [
-      vue.renderSlot(_ctx.$slots, "indicator", {}, () => [
-        vue.createElementVNode("span", {
-          class: vue.normalizeClass($options.dropdownIconClass),
-          "aria-hidden": "true"
-        }, null, 2)
-      ])
+      ($props.loading)
+        ? vue.renderSlot(_ctx.$slots, "loadingicon", {
+            key: 0,
+            class: "p-multiselect-trigger-icon"
+          }, () => [
+            ($props.loadingIcon)
+              ? (vue.openBlock(), vue.createElementBlock("span", {
+                  key: 0,
+                  class: vue.normalizeClass(['p-multiselect-trigger-icon pi-spin', $props.loadingIcon]),
+                  "aria-hidden": "true"
+                }, null, 2))
+              : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                  key: 1,
+                  class: "p-multiselect-trigger-icon",
+                  spin: "",
+                  "aria-hidden": "true"
+                }))
+          ])
+        : vue.renderSlot(_ctx.$slots, "dropdownicon", {
+            key: 1,
+            class: "p-multiselect-trigger-icon"
+          }, () => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), {
+              class: vue.normalizeClass(['p-multiselect-trigger-icon', $props.dropdownIcon]),
+              "aria-hidden": "true"
+            }, null, 8, ["class"]))
+          ])
     ]),
     vue.createVNode(_component_Portal, { appendTo: $props.appendTo }, {
       default: vue.withCtx(() => [
@@ -1233,9 +1283,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                               vue.createElementVNode("div", {
                                 class: vue.normalizeClass(['p-checkbox-box', { 'p-highlight': $options.allSelected, 'p-focus': $data.headerCheckboxFocused }])
                               }, [
-                                vue.createElementVNode("span", {
-                                  class: vue.normalizeClass(['p-checkbox-icon', { [$props.checkboxIcon]: $options.allSelected }])
-                                }, null, 2)
+                                vue.renderSlot(_ctx.$slots, "headercheckboxicon", {
+                                  allSelected: $options.allSelected,
+                                  class: "p-checkbox-icon"
+                                }, () => [
+                                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checkboxIcon ? 'span' : 'CheckIcon'), {
+                                    class: vue.normalizeClass(['p-checkbox-icon', { [$props.checkboxIcon]: $options.allSelected }])
+                                  }, null, 8, ["class"]))
+                                ])
                               ], 2)
                             ], 2))
                           : vue.createCommentVNode("", true),
@@ -1256,9 +1311,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                 onBlur: _cache[9] || (_cache[9] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
                                 onInput: _cache[10] || (_cache[10] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
                               }, $props.filterInputProps), null, 16, _hoisted_11),
-                              vue.createElementVNode("span", {
-                                class: vue.normalizeClass(['p-multiselect-filter-icon', $props.filterIcon])
-                              }, null, 2)
+                              vue.renderSlot(_ctx.$slots, "filtericon", { class: "p-multiselect-filter-icon" }, () => [
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'SearchIcon'), {
+                                  class: vue.normalizeClass(['p-multiselect-filter-icon', $props.filterIcon])
+                                }, null, 8, ["class"]))
+                              ])
                             ]))
                           : vue.createCommentVNode("", true),
                         ($props.filter)
@@ -1270,9 +1327,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                           onClick: _cache[11] || (_cache[11] = (...args) => ($options.onCloseClick && $options.onCloseClick(...args))),
                           type: "button"
                         }, $props.closeButtonProps), [
-                          vue.createElementVNode("span", {
-                            class: vue.normalizeClass(['p-multiselect-close-icon', $props.closeIcon])
-                          }, null, 2)
+                          vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-multiselect-close-icon" }, () => [
+                            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
+                              class: vue.normalizeClass(['p-multiselect-close-icon', $props.closeIcon])
+                            }, null, 8, ["class"]))
+                          ])
                         ], 16, _hoisted_13)), [
                           [_directive_ripple]
                         ])
@@ -1334,9 +1393,14 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
                                       vue.createElementVNode("div", {
                                         class: vue.normalizeClass(['p-checkbox-box', { 'p-highlight': $options.isSelected(option) }])
                                       }, [
-                                        vue.createElementVNode("span", {
-                                          class: vue.normalizeClass(['p-checkbox-icon', { [$props.checkboxIcon]: $options.isSelected(option) }])
-                                        }, null, 2)
+                                        vue.renderSlot(_ctx.$slots, "itemcheckboxicon", {
+                                          selected: $options.isSelected(option),
+                                          class: "p-checkbox-icon"
+                                        }, () => [
+                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.checkboxIcon ? 'span' : 'CheckIcon'), {
+                                            class: vue.normalizeClass(['p-checkbox-icon', { [$props.checkboxIcon]: $options.isSelected(option) }])
+                                          }, null, 8, ["class"]))
+                                        ])
                                       ], 2)
                                     ]),
                                     vue.renderSlot(_ctx.$slots, "option", {