[Label] Icons should have correct margin when placed after the text

This works:

<a class="ui label">
  <i class="mail icon"></i>
  Mail
</a>

This, almost works (the spacing is off):

<a class="ui label">
  Mail
  <i class="mail icon"></i>
</a>

Here is a screen shot of the difference:

Only if I use the delete icon is the spacing as it should be. Here is the code:

<a class="ui label">
  Tag
  <i class="delete icon"></i>
</a>

Here is a screen shot showing the difference in the spacing:

Is there any way to get the spacing to work for other icons? If so, can you please let me know how?

Thanks.

[ziaratban]

@Banandrew , Your opinion is reasonable. @jlukic override is reasonable but I’m exiting the semantic ui standard.

this is my comment semantic/src/site/elements/label.overrides

.ui.label.icon > .icon{
    margin : 0em @iconDistance 0em 0em;
}

.ui.label.icon[class*="right icon"] > .icon{
    margin : 0em 0em 0em @iconDistance;
}

examples

<div class="ui icon label">
  <i class="mail icon"></i>
  23
</div>

<div class="ui right icon label">
  23
  <i class="mail icon"></i>
</div>

[awgv]

Hi @moshemo,

Sorry for the delay, it’s very easy to fix. Open installation_folder/src/site/elements/label.overrides, put the following there and rebuild the framework:

.ui.label > .right.icon {
  margin: 0em 0em 0em @iconDistance;
}

You can choose your own namespace instead of .right.icon.