I am using the Lightning:inputField to render a lookup (custom object) inside a RecordEditForm. Though the functionality works fine, the object's icon does not render, like it does on a standard edit page.

Standard Edit Page

enter image description here

Custom Lighting Component

enter image description here

Other slight variations apart the most apparent difference is the missing icon. This appears to be a bug. Any known workarounds?


I have a similar component but I am just displaying an icon in an ui:inputText field. I use:

<div class="slds-form-element" >
    <div class="slds-form-element__control">
        <div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_left" aura:id="iconPosition">
            <ui:inputText updateOn="keyup"
                          class="slds-input slds-combobox__input"
                          placeholder="Start entering the mailing address"/>
            <span class="slds-icon_container slds-input__icon">
                <div class="slds-icon slds-icon slds-icon_x-small slds-icon-text-default icon" >
                    <lightning:icon iconName="utility:checkin" size="x-small"/>

Currently there seems to be a bug with icon position and the placeholder/text position where they overlap eachother. This was working for me 2 days ago, I have not changed the code and now it is showing an overlap. I'm pretty sure it's just a SF bug they will resolve at some point. Also, you need to declare your icon, go to https://www.lightningdesignsystem.com/icons/ to find the icon you want to use, then place the type with the name in iconName="".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.