Button: Control Icon Size

HI colleagues - we received the following issue on the React wrapper:

Original Issue: https://github.com/SAP/ui5-webcomponents-react/issues/365 Original Author: @isaqueha

Description I would like to control the size of an Icon inside a Button.

Is your feature request related to a problem? Please describe. I was developing a feature where a Button with a big Icon was needed, but there is no simple way to achieve that.

Describe the solution you’d like I would like a property inside the Button component to control the Icon size through CSS or so.

Describe alternatives you’ve considered I tried to alter several different CSS properties in the Button component so the Icon would be affected. No result so far. Some ideas:

• https://sapui5.hana.ondemand.com/#/api/sap.ui.core.Icon
• https://sap.github.io/ui5-webcomponents/playground/components/Icon (see Customized Icons)

Additional context As seen in the screenshot below, I wanted to make the sys-cancel Icon inside the Button as big as the search Icon in the left of the Bar:

The search Icon size was controlled with the width: 1.5rem CSS property.

[MarcusNotheis]

Hi @isaqueha, I think it should work with all components that are accepting the children prop. But whenever the typing says it’s a string or another primitive value it has to be handled with care 😄 I would rather recommend this approach as “last resort” in case nothing else helps.

[isaqueha]

Thanks, @MarcusNotheis, @ilhan007 Your suggestions worked using the React Components!

Code:

Design:

@MarcusNotheis, will this “implicit Component” approach work similarly in other React Components when needed?

This workaround is enough for us right now 😄 Unless you want to keep it open for the feature suggestion, I believe we can close this issue.