Search code examples
salesforcesalesforce-lightninglwc

Embed Lightning-input with lightning-icon in LWC


Can someone help with sample of embedding the lightning-icon inside a lightning-input in LWC

<lightning-input type="search" name="To Address" label="To" 
                              class="slds-input-has-icon_right slds-m-bottom_small">
    <lightning-icon icon-name=action:email>
</lightning-icon>
</lightning-input>

I have also tried the below Approach which doesn't work

<div class="slds-form-element">
<label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
    <lightning-icon icon-name="utility:adduser" size="medium">
    </lightning-icon>
    <input type="text" id="text-input-id-1" class="slds-input" />
</div>


Solution

  • Here is the solution!!

    <lightning-button-icon class="btnIconOverlay" icon-name="utility:adduser">
    </lightning-button-icon>
    <lightning-input type="search" name="To Address" value={toAddress}>              
    </lightning-input>
    

    Add the below CSS to the lightning-button-icon, which assist in overlaying the icon.

    .btnIconOverlay {
        position: absolute;
        z-index: 1;
        margin: 0.5% 0 0 92%;
    }