How to change the button icon color ?

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;
    }

3 Replies 1 reply marked as answer

MK Mohan Kumar Ramasamy Syncfusion Team July 28, 2020 02:22 PM UTC

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. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 


Marked as answer

BJ Ben Junior July 28, 2020 03:11 PM UTC

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. 


MK Mohan Kumar Ramasamy Syncfusion Team July 29, 2020 01:28 PM UTC

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 


Loader.
Up arrow icon