How to place icon next to or within input field - sapui5

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 (code below), it displaces the Dauer input Field.
Is there a way to make it look clean and that's next to it? Or better in the input field inside?
I can make the button smaller with CSS but there is still a gap between them.. And it does not move automatically.
The best solution is like the Datum above with a small icon inside where I can click or like the icon is next to the Dauer without no gap between input field from Dauer and the ? icon.
PS: I just want it like this (I will decide then later which option is better. But it is possible?)
<form:SimpleForm id="neuezeiterfassung"
editable="true"
title="Neue Zeiterfassung anlegen"
>
<Label
text="Auftrag"
class="font1"
tooltip="Auftrag eingeben"
/>
<l:VerticalLayout>
<ComboBox id="Auftrag"
items="{/ZAUFKSet}"
showSecondaryValues="true"
width="50%"
>
<core:ListItem text="{Aufnr}" />
</ComboBox>
</l:VerticalLayout>
<Label
text="Datum"
class="font1"
/>
<DatePicker id="DP3"
valueFormat="dd.MM.yyyy"
displayFormat="medium"
width="50%"
placeholder="dd.mm.yyyy"
/>
<Label class="font1" text="Dauer" />
<Input id="dauer"
class="dauer"
placeholder="Dauer eingeben ... "
width="50%"
/>
<HBox class="sapUiSmallMargin">
<core:Icon
src="sap-icon://sys-help"
class="size1" color="#031E48" press="aseads"
>
<core:layoutData>
<FlexItemData growFactor="1" />
</core:layoutData>
</core:Icon>
</HBox>
<!-- <Button icon="sap-icon://sys-help" class="myButton"/> -->
<Label class="font1" text="Arbeitsbeschreibung" />
<TextArea id="beschreibung" width="50%" />
</form:SimpleForm>

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:
<Input showValueHelp="true"
valueHelpIconSrc="sap-icon://sys-help"
valueHelpRequest="alert('Help requested')"
/><!-- valueHelpIconSrc available since 1.84.0 -->
No need to extend sap.m.InputBase in this case. Other input controls like sap.m.MaskInput still need to be extended as shown in the linked Plunk 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 addEndIconapi 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.Iconapi, which is highly customizable.
const icon = this.addEndIcon({
id: this.getId() + "-questionMarkBtn",
src: IconPool.getIconURI("sys-help"),
noTabStop: true,
tooltip: "Information",
press: [this.onEndButtonPress, this],
}); // See sap.ui.core.Icon/properties for more settings
// icon.addStyleClass(...); if even more customization required..

Answer 2

You can achieve it using the below code, just updated the CSS as per your requirement. It is a responsive design, it will work for all the devices.
CODE
<VBox class="sapUiSmallMargin">
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy"/>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL7 L7 M7 S10" />
</layoutData>
</Input>
<Button icon="sap-icon://sys-help" press="onPress" >
<layoutData>
<l:GridData span="XL1 L1 M1 S2" />
</layoutData>
</Button>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung"/>
</f:content>
</f:SimpleForm>
</VBox>
Output:
If you are looking for below output
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium"
placeholder="dd.mm.yyyy">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</DatePicker>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</Input>
<Button icon="sap-icon://sys-help" press="onPress" width="40px" >
<layoutData>
<l:GridData span="XL1 L1 M1 S3" />
</layoutData>
</Button>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung">
<layoutData>
<l:GridData span="XL8 L8 M7 S9" />
</layoutData>
</TextArea>
</f:content>
</f:SimpleForm>
With icon
<VBox class="sapUiSmallMargin">
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
title="Neue Zeiterfassung anlegen"
labelSpanXL="3"
labelSpanL="3"
labelSpanM="3"
labelSpanS="12"
adjustLabelSpan="false"
emptySpanXL="1"
emptySpanL="1"
emptySpanM="1"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false" >
<f:content>
<Label text="Auftrag" tooltip="Auftrag eingeben" />
<ComboBox items="{/ZAUFKSet}" id="Auftrag" showSecondaryValues="true">
<core:ListItem text="{Aufnr}"/>
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</ComboBox>
<Label text="Datum" labelFor="DP3"/>
<DatePicker id="DP3" valueFormat="dd.MM.yyyy" displayFormat="medium" placeholder="dd.mm.yyyy">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</DatePicker>
<Label class="font1" text="Dauer"/>
<Input value="Street">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</Input>
<HBox>
<core:Icon src="sap-icon://sys-help" color="#031E48" press="onPress" class="infoIcon"/>
<layoutData>
<l:GridData span="XL1 L1 M1 S1" />
</layoutData>
</HBox>
<Label text="Arbeitsbeschreibung"/>
<TextArea id="beschreibung">
<layoutData>
<l:GridData span="XL10 L10 M10 S10" />
</layoutData>
</TextArea>
</f:content>
</f:SimpleForm>
</VBox>
If you are using the ICON you need to add the style as well for alignment
.infoIcon {
line-height: 3rem;
}

Answer 3

Sometimes extending the InputBase class can be a bit overkill/increase the complexity of the code.
You can also use Flexbox containers to achieve the alignment of the input and the icon.
For example, if you want the input and the icon to be centered vertically and horizontally:
<HBox
alignItems="Center"
justifyContent="Center">
<Input>
<layoutData>
<FlexItemData growFactor="3" />
</layoutData>
</Input>
<core:Icon
src="sap-icon://sys-help">
<!-- Be careful here with the namespaces (use layoutData from core, not m) -->
<core:layoutData>
<FlexItemData growFactor="1" />
</core:layoutData>
</core:Icon>
</HBox>
This will give something like this:
See Flexbox for more examples (API Reference is available at the top of the page).