How to place icon next to or within input field

Question

How I can put my icon next to or within the input field?

The problem is, the icon changes the form. Usually, it\'s like this:

But when I\'m adding the icon

Answer 1

Update: with the change in commit:8f1757d, which is available since UI5 1.84, the value help icon can be changed via valueHelpIconSrc:

No need to extend sap.m.InputBase in this case. Other input controls like sap.m.MaskInput still need to be extended as shown below.

---

Original answer:

The best solution is like the Datum above with a small icon inside where I can click. (...) Is it possible?

Yes, it's possible. Here is a minimal example: https://embed.plnkr.co/EzlF2tkvalJWvSEn

For this, UI5 provides the API addEndIcon^api which is protected, meaning it should be used only when extending sap.m.InputBase!

As an argument for the addEndIcon, you can pass a map of settings that are required to create sap.ui.core.Icon^api, which is highly customizable.

const icon = this.addEndIcon({
  id: this.getId() + "-questionMarkBtn",
  src: IconPool.getIconURI("sys-help"),
  noTabStop: true,
  tooltip: "Information",
  press: this.onEndButtonPress.bind(this),
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..