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.