How to change the button icon color ?

[Ben Junior]

I placed a split button as a  "sub menu items column" in the grid and it works great. Using the snippet below I was able to customize the appearance of the button except for the icon color (which is an arrow pointing down). I hit F12 in the browser to use the developer tools, but couldn't find any reference to its icon. I would like to have the icon same color as the button text color (black in this example)

   .e-btn  {

        font-size:12px;

        background-color:white;

        border-color:white;

        color: black;

    }

[Mohan Kumar Ramasamy]

Hi Ben, 

 

We have checked your reported query, we can achieve your requirement using css class. Please refer the below code snippets. 

 

  <SfSplitButton Content="Message" CssClass="e-grid-splitbtn"> 

                        <DropDownMenuItems> 

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

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

                            <DropDownMenuItem IconCss="e-icons e-update" Text="Update"></DropDownMenuItem> 

                            <DropDownMenuItem IconCss="e-icons e-cancel-icon" Text="Cancel"></DropDownMenuItem> 

                        </DropDownMenuItems> 

                    </SfSplitButton> 

<style> 

    .e-grid-splitbtn.e-btn { 

        font-size: 12px; 

        background-color: white; 

        border-color: white; 

        color: red; 

    } 

    .e-grid .e-grid-splitbtn.e-btn .e-icons { 

        color: red; 

    } 

</style> 

 

 

For your reference, we have prepared a sample based on this. Please refer below link. 

 

Link: https://www.syncfusion.com/downloads/support/forum/156433/ze/156433-BlazorApp1-1640166958  

 

Please let us know, if you need any further assistance. 

 

Regards, 

Mohankumar R 

[Ben Junior]

Thanks for your answer and thanks so much for adding the  "e-grid-splitbtn" prefix in the style I created. Although it was working you improved it and made it more localized, probably preventing future conflicts with other components. 

[Mohan Kumar Ramasamy]

Hi Ben,   

  

Thanks for the update.  

 

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

 

Regards, 

Mohankumar R