We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Customize The Expand And Collapse Icons

I would like to use images as icons, is there how?


2 Replies 1 reply marked as answer

LD LeoLavanya Dhanaraj Syncfusion Team October 12, 2022 12:09 PM

Hi Fernando,


Greetings from Syncfusion support.


From your shared details, we understand that you want to use images instead of icons for the expand and collapse icons in the Blazor TreeView component. Based on your requirement, we have prepared a sample with the latest version. Here, we've used CSS selectors to set the background-image for the corresponding icons. Also, you can overwrite the CSS transform property to restrict the rotation of the expand/collapse icons.


Check the below mentioned code snippets.


[Index.razor]

<SfTreeView TValue="DriveData" CssClass="custom">…</SfTreeView>

 

<style>

    .custom .e-list-item .e-icons {

        font-family: "Customize-icon";

    }

 

    .custom.e-treeview .e-list-item .e-icon-expandable::before, .custom.e-treeview .e-list-item .e-icon-collapsible:before {

        background-image: url(https://cdn.syncfusion.com/content/images/Logo/Logo_Black_72dpi_without.png);

    }

    .e-treeview .e-list-item .e-icons.e-icon-collapsible {

        transform: none;

    }

</style>


Please check the attached sample and get back to us if you have any further assistance.


Regards,

Leo Lavanya Dhanaraj


Attachment: ExpandIconAsImage_d25096b.zip

Marked as answer

FC Fernando Candido October 13, 2022 07:19 AM

Thanks


Loader.
Live Chat Icon For mobile
Up arrow icon