Help with icon colors

[jose luis barajas]

Hi

I need your help, how can I change the color of the icons 

in Blazor Wasm

                        <SfDropDownButton Content="">

                            <DropDownButtonEvents ItemSelected="SeleccionarOpcion"></DropDownButtonEvents>

                            <DropDownMenuItems>

                                <DropDownMenuItem IconCss="e-icons e-list-lapiz" Text="Editar" Id="1"/>

                                <DropDownMenuItem IconCss="e-icons e-list-carpeta" Text="Reporte" Id="2"></DropDownMenuItem>

                            </DropDownMenuItems>

                        </SfDropDownButton>

like this piece of css code, works with icons in datagrid, but not in the dropdownmenu

  .e-grid .e-icons.e-edit{ 

        color:#0288D1; 

    } 

Attachment: duda1_5839aaef.rar

[Aravinthan Seetharaman]

Hi Jose, 

 

Thanks for contacting Syncfusion Support. 

 

We have checked your query. We can achieve your requirement by overriding css style in icon css. Please refer the below code snippet and sample below. 

 

Index.razor 

 

@using Syncfusion.Blazor.SplitButtons 

 

<SfDropDownButton IconCss="e-icons e-message" Content="Message"> 

    <DropDownMenuItems> 

        <DropDownMenuItem Text="Edit" IconCss="e-icons e-edit"></DropDownMenuItem> 

        <DropDownMenuItem Text="Delete" IconCss="e-icons e-delete"> </DropDownMenuItem> 

        <DropDownMenuItem Text="Setting" IconCss="e-icons e-setting"> </DropDownMenuItem> 

    </DropDownMenuItems> 

</SfDropDownButton> 

 

<style> 

    .e-message::before { 

        content: '\e7cb'; 

    } 

   .e-edit::before {  

      content: '\e78f'; 

      color:darkgoldenrod; 

    } 

    .e-delete::before { 

        content: "\e773"; 

        color:blueviolet; 

    } 

    .e-setting::before { 

        content: "\e679"; 

        color:antiquewhite; 

    } 

</style> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/164552/ze/DropDown_Icon_Color-1962507828 

 

Could you please check the above details, and get back to us if you need assistance on this. 

 

Regards, 

Aravinthan S

[jose luis barajas]

Hi Aravinthan

Thanks for your help.. Its working now!!

[Aravinthan Seetharaman]

Hi Jose, 

 

Thanks for the update. 

 

We are happy to hear that your requirement has been achieved. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Aravinthan S