Bootstrap select with BS4 input-group-prepend

Question

I am using bootstrap 4 and bootstrap select version 1.13.2 (latest), which should support bootstrap 4. As mentioned in docs, i even manually specified BS verison via

$.fn.selectpicker.Constructor.BootstrapVersion = '4';

I wanted to have an icon next to the picker, i used following markup

<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">
        <i class="fa fa-user"></i>
      </div>
    </div>
    <select id="internal-select-picker" class="form-control selectpicker" data-live-search="true" data-size="10" multiple>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>                        
</div>

And the result is this, as you can see the icon is slightly larger than the select, i tried to apply different bs styles to both picker and icon group but nothing worked

Any suggestions how to resolve this issue will be appreciated

Answer 1

I ended up coming up with my own fix by seeing what the Bootstrap CSS was doing to the drop down box and making my own classes to add fixes.

I added my own classes called fix-label-group and fix-label-item. See my jsfiddle below:

https://jsfiddle.net/ddschmitz/nkywb1xg/2/