title: Semantic UI dropdown icon only?
body: <p>Based on <a href="http://jsfiddle.net/t9vfxo5t/" rel="nofollow noreferrer">http://jsfiddle.net/t9vfxo5t/</a> I want a Semantic UI dropdown as shown but the final result I only want to be displayed as the flag, not the flag and country name text. I still want the country names to appear on the drop down when clicked though.</p>
  
  <p>I tried removing the text in <a href="http://jsfiddle.net/Lhzua273/1/" rel="nofollow noreferrer">http://jsfiddle.net/Lhzua273/1/</a> but it then also removes it from the dropdown list. </p>
  
  <pre><code>&lt;div class="ui fluid search selection dropdown"&gt;
      &lt;input type="hidden" name="language"&gt;
      &lt;div class="default text"&gt;Select language&lt;/div&gt;
      &lt;div class="menu"&gt;
          &lt;div class="item" data-value="gb"&gt;&lt;i class="gb flag"&gt;&lt;/i&gt;English&lt;/div&gt;
          &lt;div class="item" data-value="es"&gt;&lt;i class="es flag"&gt;&lt;/i&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>Can anyone suggest how it could be achieved? </p>
  
  <p>(Ultimately it is so I can have 4 icon dropdowns side by side horizontally in a div row as shown so they fit across a mobile phone in portrait mode. It's so the user can select preferred country 1, 2, 3 and 4. I'm also hoping when each list drops down after clicking, they can still fit inside the portrait screen, so the left margin of the dropdown list would need to go negative if the list was hitting the right edge of the screen.)</p>
  
  <p><a href="https://i.stack.imgur.com/PdNcE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PdNcE.png" alt="enter image description here"></a></p>