[SalesForce] Lightning buttonIcon not rendering inside input box

I'm trying to render a buttonIcon inside an <input /> tag.

However, it's turning out like this:

enter image description here

I would like the buttonIcon to appear inside the box.

Here's my code:

<aura:component >
<div aura:id="dropdown" class="slds-picklist slds-dropdown-trigger slds-dropdown-trigger--click">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-01">Categories</label>
    <div class="slds-grid slds-form-element__control slds-input-has-icon slds-input-has-icon--right slds-picklist__input">
        <input type="search" id="text-input-01" class="slds-lookup__search-input slds-input" placeholder="Select an Option" aria-owns="option-list-01" role="combobox" aria-activedescendant="" aria-expanded="true" readonly="" />
          <lightning:buttonIcon iconName="utility:down" variant="bare" onclick="{!c.openDropdown}" alternativeText="Open or close dropdown."/>
    </div>

  </div>
  <div class="slds-dropdown slds-dropdown--left slds-dropdown--length-5" role="listbox">
    <ul id="option-list-01" class="slds-dropdown__list" role="presentation">
      <li class="slds-is-selected" role="presentation">
        <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="0" id="listbox-option-2279">
            <lightning:icon iconName="utility:check" size="xx-small" />
          <span class="slds-truncate">Option A</span>
        </span>
      </li>
      <li role="presentation">
        <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2280">

          <span class="slds-truncate">Option B</span>
        </span>
      </li>
      <li role="presentation">
        <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2281">

          <span class="slds-truncate">Option C</span>
        </span>
      </li>
      <li role="presentation">
        <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2282">

          <span class="slds-truncate">Option D</span>
        </span>
      </li>
      <li role="presentation">
        <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2283">

          <span class="slds-truncate">Option E</span>
        </span>
      </li>
      <li role="presentation">
        <span class="slds-lookup__item-action slds-lookup__item-action--label" role="option" tabindex="-1" id="listbox-option-2284">

          <span class="slds-truncate" title="Option FGHIJKLMNOPQRSTUVWXYZ">Option FGHIJKLMNOPQRSTUVWXYZ</span>
        </span>
      </li>
    </ul>
  </div>
</div>

</aura:component>

Best Answer

Change the class on your lightning:buttonIcon, e.g.

<lightning:buttonIcon 
    class="slds-button slds-input__icon slds-text-color--default" 
    iconName="utility:down" variant="bare" onclick="{!c.openDropdown}" 
    alternativeText="Open or close dropdown."/>

I found these by inspecting the DOM on the example here.

Related Topic