Icons inside Input Fields LWC

Hello folks, today we will discuss Icons inside Input Fields LWC. We will create lightning-input field icons inside it. We can align icons left and right sides. We use slds classes for the alignment of the icons.

Also, check this: Use updateRecord in LWC Salesforce

Key Highlights :

1. Icons on the left align in the lightning input field.
2. Icons on the right align in the lightning input field.
3. Use slds icons and slds classes.

Code :

IconFieldLWC.HTML :

<template>
	<!------ right align icons in input field -->
	<lightning-card title="Right Align Icons in input fields LWC">
		<div class="slds-p-horizontal_small">
			<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
				<lightning-icon size="x-small"
					class="iconMargin slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default"
					icon-name="utility:user"></lightning-icon>
				<lightning-input type="text" label="User Name"></lightning-input>
			</div>
			<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
				<lightning-icon size="x-small"
					class="iconMargin slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default"
					icon-name="utility:email"></lightning-icon>
				<lightning-input type="text" label="Email"></lightning-input>
			</div>
			<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
				<lightning-icon size="x-small"
					class="iconMargin slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default"
					icon-name="utility:phone_portrait"></lightning-icon>
				<lightning-input type="text" label="Mobile"></lightning-input>
			</div>
            <lightning-button class="slds-align_absolute-center slds-m-top_small" variant="brand" label="Submit"
                        onclick={handleSubmit}>
            </lightning-button>
		</div>
	</lightning-card>
	<!------ /right align icons in input field -->
	<br/>
	<!------ left align icons in input field -->
	<lightning-card title="Left Align Icons in input fields LWC">
		<div class="slds-p-horizontal_small">
			<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
				<lightning-icon size="x-small"
					class="iconMargin slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
					icon-name="utility:user"></lightning-icon>
				<lightning-input type="text" label="User Name"></lightning-input>
			</div>
			<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
				<lightning-icon size="x-small"
					class="iconMargin slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
					icon-name="utility:email"></lightning-icon>
				<lightning-input type="text" label="Email"></lightning-input>
			</div>
			<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">
				<lightning-icon size="x-small"
					class="iconMargin slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default"
					icon-name="utility:phone_portrait"></lightning-icon>
				<lightning-input type="text" label="Mobile"></lightning-input>
			</div>
            <lightning-button class="slds-align_absolute-center slds-m-top_small" variant="brand" label="Submit"
                        onclick={handleSubmit}>
            </lightning-button>
		</div>
	</lightning-card>
	<!------ /left align icons in input field -->
</template>

IconFieldLWC.JS:

import { LightningElement } from 'lwc';
export default class IconFieldLWC extends LightningElement {
       handleSubmit(){
       }
}

IconFieldLWC.CSS:

.iconMargin{
	margin-top: 1px!important;
}

IconFieldLWC.JS-meta.xml:

<?xml version="1.0"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
	<apiVersion>55.0</apiVersion>
	<isExposed>true</isExposed>
	<targets>
		<target>lightning__HomePage</target>
	</targets>
</LightningComponentBundle>

Output :

Reference :

1. LWC Input fields
2. LWC Icons