Add font awesome in EJ2 TypeScript Accordion control

2 May 20233 minutes to read

We can customize the Accordion component items by using font awesome icons.

  • Need to add font awesome CDN reference link in your sample to use font awesome icons.

<link rel="stylesheet" href="" />

You can add the font awesome icons to the Accordion header using ‘iconCss’ property. The following sample illustrates how to use font awesome in Accordion component.

import {Accordion} from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';

let accordion: Accordion = new Accordion({
    items: [
      { header: 'Twitter', expanded: true,  iconCss: 'fa fa-twitter', content: 'Twitter is an online social networking service that enables users to send and read short 140-character messages called "tweets".' },
      { header: 'Facebook',  iconCss: 'fa fa-facebook', content: 'Facebook is an online social networking service headquartered in Menlo Park, California. Its website was launched on February 4, 2004, by Mark Zuckerberg with his Harvard College roommates.' },
      { header: 'WhatsApp', iconCss: 'fa fa-whatsapp',  content: 'WhatsApp is an American freeware, cross-platform messaging and Voice over IP (VoIP) service owned by Facebook, Inc.' }
<!DOCTYPE html>
<html lang="en">

    <title>Essential JS 2 Accordion</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Toolbar Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="" rel="stylesheet" />
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="">
    <script src=""></script>
    <script src="systemjs.config.js"></script>
<script src="" type ="text/javascript"></script>

    <div id='loader'>LOADING....</div>
    <div id='container'>
        <div id='element'></div>
        <div id='result'></div>



Use following CSS to customize the accordion items header icons.

.e-accordion .e-acrdn-item .e-acrdn-header .e-acrdn-header-icon {
         display: inline-block;
         padding: 0 10px 0 0 !important;

Use following CSS to customize the selected accordion item content icons.

.e-accordion .e-acrdn-item.e-select .e-acrdn-panel .e-acrdn-content .e-content-icon {
    color: rgba(0, 0, 0, 0.54) !important;