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'>
<div class='item' data-text='Male' data-value='male'>Male</div>
<div class='item' data-text='Female' data-value='female'>Female</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.