How to customize the expander icon of React Accordion component?
The Accordion component has the option to customize its default expand and collapse icons by overriding their corresponding CSS styles. Follow the steps below 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:
Figure 1: Expander and collapse icon customization
For more details about Syncfusion Accordion Component, refer to this link.
Conclusion
We hope you enjoyed learning on how to customize the expander icon of the 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, BoldDesk Support, or feedback portal. We are always happy to assist you!
