From 836609da5c74d80f57949b95bcb7bb38fe05f586 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: Wed, 30 Mar 2022 15:34:57 +0300
Subject: [PATCH] Fixed #2373 - Accordion | New expandIcon and collapseIcon
 properties

---
 api-generator/components/accordion.js   | 12 ++++++++++++
 src/components/accordion/Accordion.d.ts |  8 ++++++++
 src/components/accordion/Accordion.vue  | 20 +++++++++++++++-----
 src/views/accordion/AccordionDoc.vue    | 12 ++++++++++++
 4 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/accordion.js b/api-generator/components/accordion.js
index 9f136887c..7ddb181c2 100644
--- a/api-generator/components/accordion.js
+++ b/api-generator/components/accordion.js
@@ -16,6 +16,18 @@ const AccordionProps = [
         type: "boolean",
         default: "false",
         description: "When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css."
+    },
+    {
+        name: "expandIcon",
+        type: "string",
+        default: "pi-chevron-right",
+        description: "Icon of a collapsed tab."
+    },
+    {
+        name: "collapseIcon",
+        type: "string",
+        default: "pi-chevron-down",
+        description: "Icon of a expanded tab."
     }
 ];
 
diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts
index 96d8a16cd..f70354ce2 100755
--- a/src/components/accordion/Accordion.d.ts
+++ b/src/components/accordion/Accordion.d.ts
@@ -31,6 +31,14 @@ export interface AccordionProps {
      * When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
      */
     lazy?: boolean | undefined;
+    /**
+     * Icon of a collapsed tab.
+     */
+    expandIcon?: string | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: string | undefined;
 }
 
 export interface AccordionSlots {
diff --git a/src/components/accordion/Accordion.vue b/src/components/accordion/Accordion.vue
index f44c81647..19f6d97a1 100755
--- a/src/components/accordion/Accordion.vue
+++ b/src/components/accordion/Accordion.vue
@@ -4,7 +4,7 @@
             <div :class="getTabHeaderClass(tab, i)">
                 <a role="tab" class="p-accordion-header-link" @click="onTabClick($event, tab, i)" @keydown="onTabKeydown($event, tab, i)" :tabindex="isTabDisabled(tab) ? null : '0'"
                     :aria-expanded="isTabActive(i)" :id="getTabAriaId(i) + '_header'" :aria-controls="getTabAriaId(i) + '_content'">
-                    <span :class="getHeaderIcon(i)"></span>
+                    <span :class="isTabActive(i) ? getHeaderCollapseIcon() : getHeaderExpandIcon()"></span>
                     <span class="p-accordion-header-text" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
                     <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
                 </a>
@@ -39,6 +39,14 @@ export default {
         lazy: {
             type: Boolean,
             default: false
+        },
+        expandIcon: {
+            type: String,
+            default: 'pi-chevron-right'
+        },
+        collapseIcon: {
+            type: String,
+            default: 'pi-chevron-down'
         }
     },
     data() {
@@ -106,12 +114,14 @@ export default {
         getTabAriaId(i) {
             return this.ariaId + '_' + i;
         },
-        getHeaderIcon(i) {
-            const active = this.isTabActive(i);
-            return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
+        getHeaderCollapseIcon() {
+            return ['p-accordion-toggle-icon pi', this.collapseIcon];
+        },
+        getHeaderExpandIcon() {
+            return ['p-accordion-toggle-icon pi', this.expandIcon];
         },
         isAccordionTab(child) {
-            return child.type.name === 'AccordionTab'
+            return child.type.name === 'AccordionTab';
         }
     },
     computed: {
diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
index c42ad1a4e..e27e39407 100755
--- a/src/views/accordion/AccordionDoc.vue
+++ b/src/views/accordion/AccordionDoc.vue
@@ -264,6 +264,18 @@ export default {
                         <td>boolean</td>
                         <td>false</td>
                         <td>When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.</td>
+                    </tr>
+                    <tr>
+                        <td>expandIcon</td>
+                        <td>string</td>
+                        <td>pi-chevron-right</td>
+                        <td>Icon of a collapsed tab.</td>
+                    </tr>
+                    <tr>
+                        <td>collapseIcon</td>
+                        <td>string</td>
+                        <td>pi-chevron-down</td>
+                        <td>Icon of an expanded tab.</td>
                     </tr>
 				</tbody>
 			</table>