Harmonize input icons style

[reqyou]

Feature Request Description

I use the Input with the prop icon={<Icon interactive />}. The Icon I use as a button to add items to a list. I also have the option enabled to delete the input content showClearIcon. When both are used together, the look and feel is very different.

Proposed Solution

From my point of view, it makes sense to add another option to say that the icon is used as a button, or derive that from <Icon interactive />, so that the interactive icon style matches the clear icon style.

Proposed Alternatives

Alternatively, a button component could be used in place of the Icon. Button transparent, however, also does not fit the clearIcon style.

Additional Context

Demo

Priority

• [ ] Low
• [x] Medium
• [ ] High
• [ ] Very High

The user experience is limited.

Stakeholder Info (if applicable)

[dimovpetar]

Hello @ui5-webcomponents-topic-rl,

The complaint here is about the color of the icon in the icon slot. See the gif above or check this example https://codesandbox.io/s/ui5-webcomponents-forked-ci1gvp?file=/index.html.

Best regards, Petar

[niyap]

Hello @reqyou,

Thanks for sharing your findings!

Actually, the custom icons styling is a responsibility of the application developers. You can achieve it using the icon slot for applying custom styles. On the other hand, will analyse whether it is possible to style the icons used within the ui5-input component in the same way as the internally added icons.

@SAP/ui5-webcomponents-topic-rl could you please look over the requirement?

Kind Regards, Niya

[hristop]

Internal BLI was created: BGSOFUIRILA-3686

[nnaydenow]

Hello @SAP/ui5-webcomponents-topic-rl,

Since the CSS modules wasn't the best approach please take a look again over this request.