Icon in Dropdown changes control's height when item selected (line-height of icon)

[onelifenyc]

Bug Report

Icon in Dropdown e.g. new SVG flags caused Dropdown to change height due to line-height

Steps to reproduce

1. Setup a UI Dropdown with Flag icons for a country and the country name
2. Check height before selection
3. Notice height of whole dropdown jumps 4px after selection

Expected result

height of dropdown should not change because of the flag icon (or other icon, haven't tested non-flag icons)

Actual result

New CSS for svg icon is different than 2.8.x where it had png and specific height and width in px

CSS: i.flag:not(.icon):before { content: "\00A0\00A0\00A0\00A0\00A0\00A0\00A0"; display: inline-block; line-height: 1.28571429em; background-repeat: no-repeat; background-position: 50%; }

HTML:

<div class="ui search selection dropdown"><input type="hidden" class="" name="COI" value="fr"><i class="remove icon"></i><input class="search" autocomplete="fomantic-search" tabindex="0"><div class="text"><i class="fr flag"></i> FRANCE</div><i class="dropdown icon"></i><div class="menu transition hidden" tabindex="-1"><div class="item" data-value="au"><i class="au flag"></i> AUSTRALIA</div><div class="item" data-value="be"><i class="be flag"></i> BELGIUM</div><div class="item" data-value="cl"><i class="cl flag"></i> CHILE</div><div class="item" data-value="dk"><i class="dk flag"></i> DENMARK</div><div class="item" data-value="fi"><i class="fi flag"></i> FINLAND</div><div class="item active selected" data-value="fr"><i class="fr flag"></i> FRANCE</div><div class="item" data-value="de"><i class="de flag"></i> GERMANY</div><div class="item" data-value="hu"><i class="hu flag"></i> HUNGARY</div><div class="item" data-value="id"><i class="id flag"></i> INDONESIA</div><div class="item" data-value="ie"><i class="ie flag"></i> IRELAND</div><div class="item" data-value="it"><i class="it flag"></i> ITALY</div><div class="item" data-value="jp"><i class="jp flag"></i> JAPAN</div><div class="item" data-value="kz"><i class="kz flag"></i> KAZAKHSTAN</div><div class="item" data-value="kr"><i class="kr flag"></i> KOREA, REPUBLIC OF</div><div class="item disabled" data-value="lu" style="display: none;"><i class="lu flag"></i> LUXEMBOURG</div><div class="item" data-value="nl"><i class="nl flag"></i> NETHERLANDS</div><div class="item disabled" data-value="nz" style="display: none;"><i class="nz flag"></i> NEW ZEALAND</div><div class="item" data-value="no"><i class="no flag"></i> NORWAY</div><div class="item" data-value="ph"><i class="ph flag"></i> PHILIPPINES</div><div class="item" data-value="pt"><i class="pt flag"></i> PORTUGAL</div><div class="item" data-value="ru"><i class="ru flag"></i> RUSSIAN FEDERATION</div><div class="item" data-value="za"><i class="za flag"></i> SOUTH AFRICA</div><div class="item" data-value="es"><i class="es flag"></i> SPAIN</div><div class="item" data-value="se"><i class="se flag"></i> SWEDEN</div><div class="item" data-value="ch"><i class="ch flag"></i> SWITZERLAND</div><div class="item" data-value="tw"><i class="tw flag"></i> TAIWAN, PROVINCE OF CHINA</div><div class="item disabled" data-value="gb" style="display: none;"><i class="gb flag"></i> UNITED KINGDOM</div></div></div>

Screenshot (if possible)

Before selection: After selection:

Version

"fomantic-ui": "^2.9.0-beta.275",

[lubber-de]

Fixed by #2337