Fixed #4305 - Calendar: Icon classes not being correctly exposed

components/lib/calendar/Calendar.d.ts

@@ -735,20 +735,44 @@ export interface CalendarSlots {
     dropdownicon(): VNode[];
     /**
      * Custom previous icon template.
+     * @param {Object} scope - previous icon slot's params.
      */
-    previousicon(): VNode[];
+    previousicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom next icon template.
+     * @param {Object} scope - next icon slot's params.
      */
-    nexticon(): VNode[];
+    nexticon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom increment icon template.
+     * @param {Object} scope - increment icon slot's params.
      */
-    incrementicon(): VNode[];
+    incrementicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
     /**
      * Custom decrement icon template.
+     * @param {Object} scope - decrement icon slot's params.
      */
-    decrementicon(): VNode[];
+    decrementicon(scope: {
+        /**
+         * Style class of the dropdown icon
+         */
+        class: any;
+    }): VNode[];
 }
 
 /**

components/lib/calendar/Calendar.vue

@@ -80,7 +80,7 @@
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
                                         v-bind="ptm('previousButton')"
                                     >
-                                        <slot name="previousicon">
+                                        <slot name="previousicon" :class="cx('previousIcon')">
                                             <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[cx('previousIcon'), previousIcon]" v-bind="ptm('previousIcon')" />
                                         </slot>
                                     </button>
@@ -125,7 +125,7 @@
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
                                         v-bind="ptm('nextButton')"
                                     >
-                                        <slot name="nexticon">
+                                        <slot name="nexticon" :class="cx('nextIcon')">
                                             <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[cx('nextIcon'), nextIcon]" v-bind="ptm('nextIcon')" />
                                         </slot>
                                     </button>
@@ -392,13 +392,13 @@
                         </div>
                         <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
                             <button v-ripple :class="cx('incrementButton')" :aria-label="$primevue.config.locale.am" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('incrementButton')">
-                                <slot name="incrementicon">
+                                <slot name="incrementicon" :class="cx('incrementIcon')">
                                     <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="cx('incrementIcon')" v-bind="ptm('incrementIcon')" />
                                 </slot>
                             </button>
                             <span v-bind="ptm('ampm')">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
                             <button v-ripple :class="cx('decrementButton')" :aria-label="$primevue.config.locale.pm" @click="toggleAMPM($event)" type="button" :disabled="disabled" v-bind="ptm('decrementButton')">
-                                <slot name="decrementicon">
+                                <slot name="decrementicon" :class="cx('decrementIcon')">
                                     <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="cx('decrementIcon')" v-bind="ptm('decrementIcon')" />
                                 </slot>
                             </button>