1. Home
  2. Forum
  3. Blazor
  4. How to add custom icon in dropdown

How to add custom icon in dropdown

I have dropdown control.I would like to know how to add custom icon in dropdown.please check the attached file for your reference.



Attachment: statusicon_bd465d14.rar

4 Replies
KI KINS October 22, 2021 04:30 AM UTC

please help


AS Aravinthan Seetharaman Syncfusion Team October 23, 2021 06:04 AM UTC

 
Thanks for contacting Syncfusion Support. 
 
We have checked your query. We can achieve your requirement by using IconCss property available in DropDownMenu. Please refer the below code snippet and sample. 
 
 
@using Syncfusion.Blazor.SplitButtons 
 
 
<SfDropDownButton Content="@CONTENT"> 
    <DropDownMenuItems> 
        <DropDownMenuItem Text="Open" IconCss=@OPEN></DropDownMenuItem> 
        <DropDownMenuItem Text="In Progress" IconCss=@PROGRESS></DropDownMenuItem> 
        <DropDownMenuItem Text="In Review" IconCss=@REVIEW></DropDownMenuItem> 
        <DropDownMenuItem Text="To Be Tested" IconCss=@TEST></DropDownMenuItem> 
    </DropDownMenuItems> 
</SfDropDownButton> 
@code { 
    const string CONTENT = "Activity"; 
    const string OPEN = "e-icons e-open"; 
    const string PROGRESS = "e-icons e-progress"; 
    const string REVIEW = "e-icons e-review"; 
    const string TEST = "e-icons e-test"; 
} 
<style> 
 
    .e-open::before { 
        content: "\e7a0"; 
        color:greenyellow; 
    } 
 
    .e-progress::before { 
        content: "\e7a0"; 
        color:cornflowerblue; 
    } 
 
    .e-review::before { 
        content: "\e7a0"; 
        color:cadetblue; 
    } 
    .e-test::before { 
        content: "\e7a0"; 
        color:coral; 
    } 
</style> 
 
 
 
Screenshot 
 
 
 
 
 
For more details regarding icons, please refer the below UG link. 
 
 
Could you please check the above details and get back to us, if you need assistance on this. 
 
Regards, 
Aravinthan S 


KI KINS October 25, 2021 05:41 AM UTC

Great support..

Thanks.........


but this not working in material theme

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/19.2.49/styles/material.css" rel="stylesheet" />

please advise the same..



AS Aravinthan Seetharaman Syncfusion Team October 27, 2021 07:27 AM UTC

Hi KINS, 
 
We have checked your query. We would like to let you know that, we need to specify the content value of icons which is available for various theme. In your case you have referred material theme. So, we have modified content value for material theme. Please refer the below code snippet and sample. 
 
 
@using Syncfusion.Blazor.SplitButtons 
 
 
<SfDropDownButton Content="@CONTENT"> 
    <DropDownMenuItems> 
        <DropDownMenuItem Text="Open" IconCss=@OPEN></DropDownMenuItem> 
        <DropDownMenuItem Text="In Review" IconCss=@REVIEW></DropDownMenuItem> 
        <DropDownMenuItem Text="To Be Tested" IconCss=@TEST></DropDownMenuItem> 
    </DropDownMenuItems> 
</SfDropDownButton> 
@code { 
    const string CONTENT = "Activity"; 
    const string OPEN = "e-icons e-open"; 
    const string PROGRESS = "e-icons e-progress"; 
    const string REVIEW = "e-icons e-review"; 
    const string TEST = "e-icons e-test"; 
} 
<style> 
    .e-open::before { 
        content: "\e671"; 
        color: greenyellow; 
        background-color: greenyellow; 
        border-radius: 8px; 
    } 
 
    .e-progress::before { 
        color: cornflowerblue; 
        content: "\e671"; 
        background-color: cornflowerblue; 
        border-radius: 8px; 
    } 
 
    .e-review::before { 
        color: cadetblue; 
        content: "\e671"; 
        background-color: cadetblue; 
        border-radius: 8px; 
    } 
 
    .e-test::before { 
        content: "\e671"; 
        background-color: coral; 
        border-radius: 8px; 
        color: coral; 
    } 
</style> 
 
 
 
 
Could you please check the above details and let us know if you need assistance on this. 
 
Regards, 
Aravinthan S 


Loader.
Up arrow icon