Custom Toolbar icon color

Question

how is it possible to change the colour of the icon inside a documentEditorContainer custom toolbar button ?

like this

I don't understand the syntax of the cssClass

this does not work

CustomToolbarItemModel = { prefixIcon: "fal fa-bomb", tooltipText: "Create an impediment", text: "Impediment", id: "Impediment", cssClass:"color:red" };

Suriya Murugan · Accepted Answer

Hi Michel, 

In previously, shared sample we have modified title bar and toolbar icons. 

To change the custom toolbar icons, you have to change the color in your font-url css class(line number: 50 in app.component.html). We have used the custom icon from same font url in toolbar(custom disable image) and title bar with color red. 

https://stackblitz.com/edit/angular-yc3zar-hynezu?file=app.component.ts  

Similarly, you can change your custom toolbar icon color in your font URL. Please let us know this satisfies your requirement. If not, can you please share the details from where you are accessing this icon? That will be helpful for us to proceed further and provide you solution at earliest. 

Regards, 
Suriya M.

Suriya Murugan · Answer

Hi Michel, 

To change color of icon, you have to define it in font setting. Please check line number: 52 in app.component.html in below sample. 

https://stackblitz.com/edit/angular-yc3zar?file=app.component.html 


cssClass is used to define css property using class name. You have to provide class name in cssClass property. 

https://ej2.syncfusion.com/angular/documentation/api/toolbar/#cssclass  

Please let us know if you have any questions. 

Regards, 
Suriya M.

Michel Lochten · Answer

it's about changing the colour of a toolbar button, not the tilte bar

Michel Lochten · Answer

Hi Michel, 

In previously, shared sample we have modified title bar and toolbar icons. 

To change the custom toolbar icons, you have to change the color in your font-url css class(line number: 50 in app.component.html). We have used the custom icon from same font url in toolbar(custom disable image) and title bar with color red. 

https://stackblitz.com/edit/angular-yc3zar-hynezu?file=app.component.ts  

Similarly, you can change your custom toolbar icon color in your font URL. Please let us know this satisfies your requirement. If not, can you please share the details from where you are accessing this icon? That will be helpful for us to proceed further and provide you solution at earliest. 

Regards, 
Suriya M. 

The icon I used comes from FontAwesome. In fact it is not possible to change the colour of icons other than yours ?for this sample de prefixIcon is : prefixIcon: "fal fa-bomb"

Suriya Murugan · Answer

Hi Michel, 

Sample link: https://stackblitz.com/edit/angular-yc3zar-6gljpz?file=app.component.html  

You can change individual icon color by defining like below(line number 59 in app.component.html): 

  

Output: 

  

Similarly, you can modify the color. If you did not define the class in our sample level, it is not possible to customize the color. Can you please check and change it in your sample? 

Regards, 
Suriya M.