Please let me know how can I embed a lightning:icon inside a lightning:input tag.
I am using the below code :
<div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left"> <lightning:icon iconName="action:add_contact" size="small" alternativeText="Add Contact"/> <lightning:input label="Account Search" name="accountsearch" type="text"/> </div> The Lightning Design System docs have a lot of good information regarding your different options for displaying icons within HTML inputs.
Here's an example where you have an icon left of the input if you just copy/paste from the docs:
<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_left"> <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#search" /> </svg> <input type="text" id="text-input-id-1" class="slds-input" placeholder="Placeholder Text" /> </div> </div> If you are using within a Salesforce Lightning app, you need to used a Lightning icon component instead of the HTML-centric SVG tag. It should look like this:
<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_left"> <lightning:icon iconName="utility:search" size="x-small" title="" /> <input type="text" id="text-input-id-1" class="slds-input" placeholder="Placeholder Text" /> </div> </div> Although it's a bit more work that just going with <lightning:input type="search" label="Search" name="search" />, you'll have complete control over the icon versus relying on Salesforce to determine the icon based on the component's type attribute.
I couldn't find a easy way of doing this for a solution I was working on, so I went ahead and created a custom component that basically does what gotoplanb suggests by creating a wrapper around a series of divs for the lightning:icon and lightning:input base components. As a bonus, I needed to be able to display a lightning:helptext inline label, so the component does that. I posted the code in a public GIT repository at https://github.com/scVandal/sfsCompoundLabelInput. Might be a good place to start and expand on.
It can be achieved using pure CSS.
Your div is going to be the size of the child lightning-input. Giving the div "position:relative", while giving the icon "position:absolute" will allow to set dynamic position for the icon within the parent's space. Z-index is required to make the icon overlap the input.
<div style="position:relative"> <lightning-input ...(other required attributes)></lightning-input> <lightning-button-icon style="position: absolute; right: 1%; top: 50%; z-index: 10;" ...(other required attributes)> </lightning-button-icon> </div> 
