How to add icon to input?

Ask us anything How do I?
1

I found how to add an icon to a button, I wish it was as simple for an input.

I want to do something similar to

image
image752×144 2.05 KB

I managed to achieve this result, using ChatGPT to help me figure out the HTML/CSS to use.

image
image764×208 9.98 KB

Pure HTML code:

<div style="display: flex; align-items: center;">
  <input type="password" placeholder="Password" style="flex: 1;">
  <i class="fa fa-eye" style="margin-left: -25px;"></i>
</div>

Tweaking this a bit with Custom CSS, I managed to achieve what I wanted.
But, I’m pretty sure it could be done properly using only weweb component controls, instead of writing custom CSS.

2

You can do this similarly to the html that you got there, have a div that has input inside and an icon. Use negative margin to place it inside the input. You could also probably use position absolute and then position it with right value