Image in place of iconCSS

[Geoffrey]

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?

----->  

Thx.

Geff

[YuvanShankar Arunagiri]

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">

    <DropDownMenuItems>

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

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

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

    </DropDownMenuItems>

</SfDropDownButton>

 

<style>

    .e-image {

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

        background-repeat: no-repeat;

        height: 20px;

        width: 40px !important;

    }

</style>

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

Regards,

YuvanShankar A

Attachment: DropDownMenuSample_e971a821.zip

[Geoffrey]

hi,

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">

thx

Geff

[Geoffrey]

Hi,

Any id ?

thx

[YuvanShankar Arunagiri]

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">

     <ChildContent>

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

     </ChildContent>

</SfDropDownButton>

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

Attachment: FetchData_7044cbdb.zip

[Geoffrey]

Hi,

Thanks, it's work !

Geff

[YuvanShankar Arunagiri]

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.