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

Image in place of iconCSS

Hello SyncFusion team,

Is it possible to use an image, in my case it would be the user's avatar, instead of the css icon?




6 Replies

YA YuvanShankar Arunagiri Syncfusion Team December 27, 2022 11:23 AM UTC

Hi Geff,

We have prepared a sample for you that demonstrates how to use the IconCss property to render an image instead of an icon. You can find the code snippet and attached sample below.

<SfDropDownButton Content="Edit" IconCss="e-image">


        <DropDownMenuItem Text="Cut"></DropDownMenuItem>

        <DropDownMenuItem Text="Copy"></DropDownMenuItem>

        <DropDownMenuItem Text="Paste"></DropDownMenuItem>





    .e-image {

        background-image: url("./syncfusion.jpeg");

        background-repeat: no-repeat;

        height: 20px;

        width: 40px !important;



Get back to us if you need any further assistance on this. 


YuvanShankar A

Attachment: DropDownMenuSample_e971a821.zip

GE Geoffrey December 27, 2022 11:47 AM UTC


sorry I expressed myself badly.

Your solution does not answer my problem.

I would need the icon/image to be bound on a property of my object, like the IconSrc below (where Image returns a URL from Cloudinary for example):

<SfDropDownButton IconCss="e-icons" IconSrc="@currentUser!.Image" CssClass="e-flat">



GE Geoffrey January 4, 2023 12:49 PM UTC


Any id ?


YA YuvanShankar Arunagiri Syncfusion Team January 5, 2023 05:12 AM UTC

Sorry for the delay, Geff,

Using ChildContent property of dropdown button, we can achieve your requirement. please refer to the below code snippet and attached sample code.

API link: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfDropDownButton.html#Syncfusion_Blazor_SplitButtons_SfDropDownButton_ChildContent

<SfDropDownButton CssClass="e-image" Items="Items">


         <img src="https://i.pinimg.com/originals/a4/96/c2/a496c2b6bc5d7cfe0e0674f6598c38ad.jpg" alt=""/>



Get back to us if you need any further assistance on this. 

Attachment: FetchData_7044cbdb.zip

GE Geoffrey January 5, 2023 03:11 PM UTC


Thanks, it's work !


YA YuvanShankar Arunagiri Syncfusion Team January 6, 2023 07:02 AM UTC

You are welcome, Geff. We are happy to hear that your requirement has been fulfilled. Please get back to us if you need any other assistance.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.

Live Chat Icon For mobile
Up arrow icon