How can I change toolbar icon color?

Question

I'm trying to set Edit (blue), Update (green) and Delete(red) icons colors. How can i do it? Also i'm trying to set round colored border, like this:

Rajapandi Ravi · Answer

Hi Test, Greetings from Syncfusion support We understand that you like to change the toolbar icon color which was same as your shared image. Based on your query, we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. Sample: https://stackblitz.com/edit/react-xzaaqc?file=index.html Screenshot: Regards, Rajapandi R

Test Test · Answer

Thanks for reply. Also how can I change color of the icons (pen, rubbish can, floppy disk)

Rajapandi Ravi · Answer

Hi Test, 

Thanks for the update 

We understand that you like to change the color of the toolbar icons. Based on your query, we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

To change the color of the icons, please use the below CSS to achieve your requirement. 






.e-btn-icon.e-delete{ 
        color: red !important; 
    } 
    .e-btn-icon.e-edit{ 
        color: blue !important; 
    } 
    .e-btn-icon.e-update{ 
        color: green !important; 
    } 


If you like to change the color of the Toolbar text, please use he below CSS to achieve your requirement. 






.e-toolbar-item[title=Edit] .e-tbar-btn-text{ 
        color: blue !important; 
    } 
    .e-toolbar-item[title=Delete] .e-tbar-btn-text{ 
        color: red !important; 
    } 
    .e-toolbar-item[title=Update] .e-tbar-btn-text{ 
        color: green !important; 
    } 


Sample: https://stackblitz.com/edit/react-xzaaqc-rd717o?file=index.html 

Screenshot 

  

Regards, 
Rajapandi R