Change the icon color

[former_member204457]

Hi Gurus,

Is it possible to change icon’s color in Personas? I don’t see icon color in the list of properties. I have a title box with dark blue color and want to make the icon’s color inside this box white for effect; is this possible?

Thank you

[former_member204457 · Accepted solution]

Hi Tamas,

I've a basic title bar which consists of label with dark blue color in background RGB (53, 74, 95) and white font, beside the label there is a button where I want to assign an icon from ui5 icon library like below

Since the background color of the button is dark blue (same as label), I want the icon color to be white as well but I can't change the icon color and icon kind of blend in with the background color since the icon color is blue as well, please see below

In the openSAP course "Adapting the UI in SAP S/4HANA Cloud Using SAP Screen Personas", week 2, unit 5, at 3:20 , there's a quick style being applied to the button which changes the icon color (and the text beside) to appear in white font. I'm looking for this style to apply in my scenario. Is this quick style available in a standard system or is this something that you've built?

Thank you.

[Tamas_Hoznek · Accepted solution]

There is no standard delivered quick style, you must define those yourself according to your needs.

In case of the openSAP course unit, the quick style doesn't really change the icon color. It is just that the icon used is defined in a way that if the background changes, the icon has a whitish contour, so it will be visible even with the dark background.

Apparently, you are using Slipstream Engine which has UI5 icon fonts (as opposed to webgui which lacks these). It seems to me that there should be a way to specify the icon font color but the implementation doesn't provide this as a customizable property. We may look into this, but for now, the only way for you would be using an icon that has the appropriate color for your selected background.

[chhavisehgal]

Hi,

Currently, have an option to use SAPUI5 icon fonts in Slipstream engine. For the icon only buttons, we can even customize the size of the icons using iconFontSize property.

We have noted down your requirement and would provide an option as a property to easily customize the SAPUI5 icons color.

[former_member204457]

Thank you to you both, adding this option would be great.

Cheers,

C

[Tamas_Hoznek]

No.
If you need a different icon color, you need to create another icon that has the image with the intended color.

But perhaps I misunderstand what you want to do, so an example with screen shots would help.