Dropdown icon differs from other fields


#1

I have added an icon to my semantic-ui dropdown so it fits in with the rest of the form. Ive been playing around with the HTML and the below is the closest I have got to what I am looking for:

<div class='ui fluid selection dropdown left icon'>
  <i class="user icon"></i>
  <input name='DropDownListCategoryClone' type='hidden'>
  <i class='dropdown icon'></i>
  <div class='default text'>
    Male
  </div>
  <div class='menu'>
    <div class='item' data-text='Male' data-value='male'>Male</div>
    <div class='item' data-text='Female' data-value='female'>Female</div>
  </div>
</div>

The issue is that there seems to be a slightly different alignment between the icons and the dropdown icon is black in stead of grey. I guess it wouldn’t be too hard to hack the css into shape, but I am wondering if there is a better way?

I have create a jsfiddle here which shows the difference between the two fields.

http://jsfiddle.net/kzv0e1ug/1/

Any ideas?