How can i modify the color to a sap icon?

[Nieves_Navarro]

I got to modify an icon in the Timeline SAPUI5 object, it would be something similar to the first image of the link below, but i'd like to change the background color too.

https://experience.sap.com/fiori-design-web/group-feed-component/

I've been searching for the way to change the color to an icon, but i'm only able to do it overwriting the 'status' property. I think there should be a better way to change the color as well as the background color. Do you have any better idea?

And if you know about changing the color of part of the text, or making it bold, i'd be interested in it too.

Thanks!

[gabriel_alves · Accepted solution]

Hello Nieves, If you only want to change the color of a specific control, maybe a good way to achieve this is creating a custom data attribute with a expression binding. check these documentation

https://openui5.hana.ondemand.com/#/topic/1ef9fefa2a574735957dcf52502ab8d0 https://openui5.hana.ondemand.com/#/topic/daf6852a04b44d118963968a1239d2c0

in the document example, you use the expression binding to evaluate the current color that you want:

<Button ... >

<customData>

<core:CustomData key="mycolor" value="{= ${/oView/status} ? 'green' : 'red' }" writeToDom="true" />

</customData>

</Button>

CSS

button[data-mycolor=green] { border: 3px solid green !important; }

button[data-mycolor=red] { border: 3px solid red !important; }

If you want a simplier approach, you can use the method addStyleClass to set your CSS class to some control via javascript

https://openui5.hana.ondemand.com/#/api/sap.ui.core.Control/methods/addStyleClass

[Nieves_Navarro · Accepted solution]

Thanks Gabriel, that was really helpful!