feat: standalone input component should support icons

[EinfachHans]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

This is a Feature Request to v7 and #26283

To fully be able to get rid of the deprecated usage of form elements within the ion item it would be great to support icon's within these elements as well.

Describe the Use Case

This are inputs in our current app:

Many Password Input's have a toggle icon to show the password at the end. Also a start icon can be great to personalize the form element more.

Describe Preferred Solution

I would prefer a slot solution where deverlopers are able to place something at the start or end slot, similar to the item. With this it would be easier to add a click handler to the icon (to for example toggle the input mode to show or hide a password)

Also it should be somehow possible to not focus the element on icon click. If i think of the password toggle icon, a click on that icon should not focus the element.

Describe Alternatives

An alternative could be two properites startIcon and endIcon, but i don't really think this is the right way, as then there also should be two events for clicking these.

Related Code

No response

Additional Information

No response

[TiBz0u]

Hey @EinfachHans , thanks for your this feature request.
For my information, how do you achieve this design currently?

I full agree with the necessity of icon event (ie: password reveal, tooltip, data masking, ...)

Regarding design of input with icon, it often refers to "inputGroup". Maybe it must be separated in a new component.
https://getbootstrap.com/docs/5.2/forms/input-group/
https://www.primefaces.org/primeng/inputgroup
https://www.primefaces.org/primeng/inputnumber

Another nice feature could be a picker in front of the input (ie: country selector for phone number).

Kr

[WolfWalter]

I was looking for the same thing for the password field. Is also part of the MD3 spec: https://m3.material.io/components/text-fields/guidelines#5c8a5f07-b1a5-455f-bf76-7ff0d724f6b0

[WolfWalter]

If this gets implemented, it would be great if it would also be possible to add multiple icons at the end. The use case for that is a password field with a show/hide button and a clear button.

[SvenBudak]

I was also very surprised today that there is no slot for buttons in inputs. Are there any updates on this?

[chrisk8er]

it is still in progress?

[averyjohnston]

This feature has been added via #28583 and will be available in a future minor release of Ionic. Thank you!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.