Right floated icon button introduces an unexpected left-margin

[kfei]

https://jsfiddle.net/g8tdvtpe/

<button class="ui basic circular left floated icon button">
    <i class="chevron left icon"></i>
</button>
<button class="ui basic circular right floated icon button">
    <i class="chevron right icon"></i>
</button>

The right chevron icon inside the button has an unexpected left-margin. But the left chevron is OK.

[dedyjuliana]

yes, I see the same issue too.

[sondreb]

This is the class definition that causes the issue:

.ui.button > .right.icon:not(.button) {
  margin: 0em -0.21428571em 0em 0.42857143em;
}

[sondreb]

You can temporarily fix the issue by adding this class, by specifying the specific icon you don't mess with other styles:

For chevron:

.ui.button > .right.chevron.icon:not(.button) {
  margin: 0;
}

For arrow:

.ui.button > .right.arrow.icon:not(.button) {
  margin: 0;
}

[jlukic]

Fixed in 2.1.9