How to create lightning input with icon inside - lwc

Hello, today I will show you how you can create your own custom lightning-input component with an icon inside it.

Currently, not all inputs have an icon inside it. The lightning-input with type = search does provide an inbuilt icon but we can not change its position to the right.

You can use any SLDS Icons but utility:icon are well supported to use inside the input fields.

Here is the sample form I have built using SLDS and lightning-icon component.

Here is the HTML code for it.

<div class="slds-p-around_large">
        <div class="slds-form-element">
            <div class="slds-text-heading_medium ">Icons Aligned Right</div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-1">Search City</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:search"></lightning-icon>
                <input type="text" id="text-input-id-1" placeholder="Type Text to Search" class="slds-input" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-2">Email</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:email"></lightning-icon>
                <input type="text" id="text-input-id-2" placeholder="Enter Your Email" class="slds-input" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-3">Password</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:password"></lightning-icon>
                <input type="text" id="text-input-id-3" placeholder="Enter Your Password" class="slds-input" />
            </div>
        </div>

        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-4">Message</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                <lightning-icon size="x-small" style="top:15px" class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" icon-name="utility:quick_text"></lightning-icon>
                <textarea id="text-input-id-4" placeholder="Enter Your message" class="slds-input"></textarea>
            </div>
        </div>

        <div class="slds-form-element slds-m-top_small">
            <div class="slds-text-heading_medium ">Icons Aligned Left</div>
        </div>
        <div class="slds-form-element">
            <label class="slds-form-element__label" for="text-input-id-5">Alternate Email</label>
            <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
                <lightning-icon size="x-small" class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" icon-name="utility:email"></lightning-icon>
                <input type="text" id="text-input-id-5" placeholder="Alternate Email" class="slds-input" />
            </div>
        </div>
    </div>

You can copy-paste the code you want. You can change the icon as per your requirement.
If you want to align the icon to left then:

1. Use slds-input-has-icon_left on the parent div.
2. Use slds-input__icon_left on the lightning-icon

Note: You will have to write your own logic for validations and advanced features as standard lightning-input components.