From cecef6ab522c6e078e7a70f1a7c3c5922ffb74cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 21 Aug 2023 16:56:32 +0300
Subject: [PATCH] Fixed #4305 - Calendar: Icon classes not being correctly
 exposed

---
 components/lib/calendar/Calendar.d.ts | 32 +++++++++++++++++++++++----
 components/lib/calendar/Calendar.vue  |  8 +++----
 2 files changed, 32 insertions(+), 8 deletions(-)

diff --git a/components/lib/calendar/Calendar.d.ts b/components/lib/calendar/Calendar.d.ts
index 0903037df..ab8dd17cb 100755
--- a/components/lib/calendar/Calendar.d.ts
+++ b/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[];
 }
 
 /**
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 51fe37747..aeb78dc2c 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/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>