Add icon inside an input field in LWC

If you have been working with LWC for sometime now, you might have seen input form elements with icons inside them. For example icon inside an text field in LWC, it can be a text field or an email field. Have you ever though about implementing it in your own project. In this article we will learn how to add icon inside input field of LWC Component.

You can read our earlier article on How to Use SLDS Icons in LWC with lightning-icon, if you are having trouble using icons.

If you want to use a custom SVG icon that are our side of SLDS library, read our article on Use custom SVG icon in LWC with static resource

Code to add icon inside an input field in LWC

HTML Code

<template>
  <div style="background:white;padding:10px">
    <div class="slds-m-around_medium">
            <!-- Input field with icon -->
            <div class="slds-form-element">
                <label class="slds-form-element__label" for="inputField">Phone Number</label>
                <!--Parent div element, with display:flex style -->
                <div class="slds-form-element__control slds-input-icon" style="display: flex;position: relative;">
                    <lightning-icon icon-name="utility:call" style="position: absolute;padding: 5px;" size="small" alternative-text="Search Icon"></lightning-icon>
                    <input type="text" id="inputField" style="padding-left: 30px" class="slds-input" placeholder="Enter Phone Number"/>
                </div>
            </div>
        </div>
    </div>
</template>

Explanation

First, we need two primary elements, in the HTML file, for this example:

1. We need to include icon using lightning-icon tag.
2. We need the input tag in which we want to show the icon.

By default the input and lightning-icon elements will be stacked vertically, which is the default structure of an HTML document. We need to align these two component side by side.

Want to learn more about lightning-icon and SLDS icons read this article on How to use SLDS icons in LWC

To stack these two elements side by side, we need to encompass them around a parent div element with a CSS style display:flex.

And now we have the alignment correct, but still it would look better if the icon is inside the input field right ?

To achieve this, we will have to change the default position of the icon element. By default all HTML elements are position static.

As you can see in the gif above, just by adding a position: absolute to the lightning-icon element, we are able to place it inside the input field. Feel free to align the icon by adding a padding.

Moreover, you can also add left padding in the input field, this gives more space between the icon and the input area.

Note: You can learn more about the position CSS styling here.

Demo

Conclusion

We should have basic understanding of how HTML is structured in a DOM and basic CSS styling like display, position. These skills can help us create a user friendly UI and solve some of the complex requirements. HTML, CSS and JS are the core foundation of LWC Framework and all Salesforce developers should have a good understating.

Feel free to utilize the provided code snippets in your personal Salesforce orgs. If you encounter any issues or have suggestions for improvement, please share your feedback in the comments section below. Don’t forget to subscribe to our newsletter for more insightful Salesforce content. Feel free to share this article with your friends if you find it useful.