How to customize the expander icon of React Accordion component?
The Accordion component has option to customize its default expand and collapse icon by overriding its corresponding CSS styles. Follow the below steps to achieve it.
Customize expander and collapse icon
Step 1: Add the below code snippets in the “src/app/app.ts” file to initialize a Accordion component.
import { Accordion } from '@syncfusion/ej2-navigations';
// Initialize Accordion component
let acrdnObj: Accordion = new Accordion({
items: [
{ header: 'Header 1', content: 'Accordion pane content 1', expanded: true },
{ header: 'Header 2', content: 'Accordion pane content 2' },
{ header: 'Header 3', content: 'Accordion pane content 3' },
{ header: 'Header 4', content: 'Accordion pane content 4' }
]
});
//Render initialized Accordion component
acrdnObj.appendTo('#Accordion_default');
Step 2: Add the below code snippets in the “src/index.html” file to customize the Accordion’s expand and collapse icon.
<html>
<head>
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.e-accordion .e-tgl-collapse-icon::before {
content: '\e823';
}
.e-accordion .e-tgl-collapse-icon.e-expand-icon::before {
content: '\e934';
}
</style>
</head>
<body>
<div id="container">
<div id="Accordion_default"></div>
</div>
</body>
</html>
Step 3: Then, run the application in the browser using the following command.
npm start
Output will be as follows.
Figure 1: Expander and collapse icon customization
For more details about Syncfusion Accordion Component, refer to this link.
Conclusion
I hope you enjoyed learning on how to customize the expander icon of React Accordion component.
You can refer to
our React Accordion feature tour page to know about its other
groundbreaking feature representations and documentation, and how to quickly get started for
configuration specifications. You can also explore our React Accordion Example to understand how to create and
manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
