Trying to use Font awesome and other icon set with accordion

Hi 
I am trying to load dynamically set the iconcss propery of in Accordion Item without create a full template header. The CSS alway adds e-icons which point to the built it icon set. How can I override this to simply have something like this

            <AccordionItem Header="@menuItem.DisplayName" CssClass="@cssClass" Disabled="@menuItem.IsDisabled" IconCss="fas fa-address-card">
                     
                <ContentTemplate>

                    @foreach (var childMenuItem in menuItem.Items)
                    {
                        <NavMenuItem MenuItem="childMenuItem" />
                    }
                </ContentTemplate>
            </AccordionItem>

Point is I am trying to set the icon to Font 

2 Replies 1 reply marked as answer

RJ Ralph Jean Pierre October 14, 2020 11:44 PM UTC

Never mind it, it seems likes using the Header template is the way to go, from there I can pretty much make it look like what I need to.


AK Alagumeena Kalaiselvan Syncfusion Team October 15, 2020 11:09 AM UTC

Hi Ralph, 

Thanks for contacting Syncfusion support! 

We have checked your reported case “How to use Font awesome and other icon set with Accordion” and Accordion provides support to allow other icons using IconCss property. We have prepared a sample based on your requirement which contains font awesome with Accordion item. Refer the below code. 
<SfAccordion> 
    <AccordionItems> 
        <AccordionItem Header="DisplayName" CssClass="@CssClass" IconCss="fas fa-address-card"> 
            <ContentTemplate> 
                <Counter></Counter> 
            </ContentTemplate> 
        </AccordionItem> 
        ... 
    </AccordionItems> 
</SfAccordion> 

Include the below highlighted font awesome style reference in ~/Host.cshtml 
<head> 
    ... 
    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" /> 
    <link rel="stylesheet" rel='nofollow' href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"> 
</head> 

Also, you can download this sample using the following link. 

Please get back to us, if you need further assistance . 

Regards 
Alagumeena.K 


Marked as answer
Loader.
Up arrow icon