Add Icons to Placeholder text in Input Fields (Need Search Icon in Search Input)

[ricktate]

Is your feature request related to a problem? Please describe...

I would like to display a search icon within the placeholder text of my search input field. This creates a visual representation for users to quickly interpret what the field does.

Describe alternatives you've considered

We've added a disabled button with a search icon. Takes up space and has a negative impact of users sometimes trying to click the button.

Additional context

Is there already a way to do this? Apologies if I'm missing something but struggling to find a way to add it.

[Hiws]

You can't do this directly using the standard placeholder attribute as it does not support HTML.
You will instead need to position the icon on top of the input with position: absolute.

You can do this fairly easily using just utility classes. You could also implement the Floating Label example, which uses the same logic of placing the label on top of the input and in turn allowing HTML.

Here's a codepen with examples of both:
https://codepen.io/Hiws/pen/OJXoyaO

[Hiws]

You could also use Input Groups and prepend/append the icon.

[ricktate]

Thanks for the suggestion @Hiws. I'll give these a shot.