Fixed #2373 - Accordion | New expandIcon and collapseIcon properties

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."
     }
 ];
 

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 {

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) {
+        getHeaderCollapseIcon() {
-            const active = this.isTabActive(i);
+            return ['p-accordion-toggle-icon pi', this.collapseIcon];
-            return ['p-accordion-toggle-icon pi', {'pi-chevron-right': !active, 'pi-chevron-down': active}];
+        },
+        getHeaderExpandIcon() {
+            return ['p-accordion-toggle-icon pi', this.expandIcon];
         },
         isAccordionTab(child) {
-            return child.type.name === 'AccordionTab'
+            return child.type.name === 'AccordionTab';
         }
     },
     computed: {

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>