Add Icon to Header in Blazor Accordion Component

28 Dec 20238 minutes to read

The icon custom css class can be added to the Accordion header using the IconCss property, and also css styles can be added to the defined class. The accordion icon element is rendered before the header text in the DOM element.

@using Syncfusion.Blazor.Navigations

<SfAccordion>
    <AccordionItems>
        <AccordionItem Header="Athletics" IconCss="e-athletics e-acrdn-icons" Expanded="true">
            <ContentTemplate>
                <ul>
                    <li><span class="e-acrdn-icons e-content-icon marathon"></span> Marathon</li>
                    <li><span class="e-acrdn-icons e-content-icon javelin"></span> Javelin Throw</li>
                    <li><span class="e-acrdn-icons e-content-icon discus"></span> Discus Throw</li>
                    <li><span class="e-acrdn-icons e-content-icon highjump"></span> High Jump</li>
                    <li><span class="e-acrdn-icons e-content-icon longjump"></span> Long Jump</li>
                </ul>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Water Games" IconCss="e-water-game e-acrdn-icons">
            <ContentTemplate>
                <ul>
                    <li><span class="e-acrdn-icons e-content-icon dive"></span> Diving</li>
                    <li><span class="e-acrdn-icons e-content-icon swimming"></span> Swimming</li>
                    <li><span class="e-acrdn-icons e-content-icon marathan_swim"></span> Marathon Swimming</li>
                    <li><span class="e-acrdn-icons e-content-icon sync_swim"></span> Synchronized Swimming</li>
                    <li><span class="e-acrdn-icons e-content-icon waterpolo"></span> Water Polo</li>
                </ul>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Racing" IconCss="e-racing-games e-acrdn-icons">
            <ContentTemplate>
                <ul>
                    <li><span class="e-acrdn-icons e-content-icon cycle_BMX"></span> Cycling BMX</li>
                    <li> <span class="e-acrdn-icons e-content-icon cycle_Mountain"></span> Cycling Mountain Bike</li>
                    <li> <span class="e-acrdn-icons e-content-icon cycle"></span> Cycle Racing</li>
                    <li> <span class="e-acrdn-icons e-content-icon sailing"></span> Sailing</li>
                    <li> <span class="e-acrdn-icons e-content-icon rowing"></span> Rowing</li>
                </ul>
            </ContentTemplate>
        </AccordionItem>
        <AccordionItem Header="Indoor Games" IconCss="e-indoor-games e-acrdn-icons">
            <ContentTemplate>
                <ul>
                    <li><span class="e-acrdn-icons e-content-icon tennis"></span> Table Tennis</li>
                    <li> <span class="e-acrdn-icons e-content-icon badminton"></span> Badminton</li>
                    <li> <span class="e-acrdn-icons e-content-icon volleyball"></span> Volleyball</li>
                    <li> <span class="e-acrdn-icons e-content-icon boxing"></span> Boxing</li>
                    <li> <span class="e-acrdn-icons e-content-icon swimming_In"></span> Swimming</li>
                </ul>
            </ContentTemplate>
        </AccordionItem>
    </AccordionItems>
</SfAccordion>

<style>
    @@font-face {
        font-family: 'acrdn-icons';
        src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    .e-acrdn-icons {
        font-family: 'acrdn-icons';
        font-size: 16px;
    }

    .cycle_BMX::before {
        content: "\e702"
    }

    .javelin::before {
        content: "\e700";
    }

    .marathon::before {
        content: "\e70e";
    }

    .tennis::before {
        content: "\e701";
    }

    .waterpolo::before {
        content: "\e703";
    }

    .swimming::before {
        content: "\e704";
        position: relative;
        top: 5px;
    }

    .discus::before {
        content: "\e705";
    }

    .boxing::before {
        content: "\e706";
    }

    .rowing::before {
        content: "\e707";
    }

    .highjump::before {
        content: "\e708";
    }

    .cycle::before {
        content: "\e70a";
    }

    .sailing::before {
        content: "\e70c";
    }

    .marathan_swim::before {
        content: "\e70d";
    }

    .boxing::before {
        content: "\e706";
    }

    .dive::before {
        content: "\e70f";
    }

    .swimming_In::before {
        content: "\e710";
        position: relative;
        top: 2px;
    }

    .badminton::before {
        content: "\e711";
    }

    .sync_swim::before {
        content: "\e713";
        position: relative;
        top: 3px;
    }

    .volleyball::before {
        content: "\e714";
    }

    .cycle_Mountain::before {
        content: "\e716";
    }

    .longjump::before {
        content: "\e717";
    }

    .e-athletics::before {
        content: "\e715";
    }

    .e-water-game::before {
        content: "\e70b";
    }

    .e-racing-games::before {
        content: "\e712";
    }

    .e-indoor-games::before {
        content: "\e709";
    }

    .e-acrdn-icons:not(.e-icons) {
        padding: 0 16px 0 0;
        vertical-align: middle;
    }

    li {
        line-height: 36px;
        list-style-type: none;
        text-indent: 16px;
    }
</style>