Как в кнопке располагать иконку рядом с текстом?
Такие иконки вставляются либо 
- фоном для кнопки
- псевдоэлементом
- фоном для псевдоэлемента

Например, фон для псевдо https://jsfiddle.net/uhs2Lqty/
Или просто фон https://jsfiddle.net/vez5ot1m/
Если есть шанс, что текста будет больше, чем на 1 строку, то флексами https://jsfiddle.net/80kLaygo/ или абсолютом https://jsfiddle.net/fn9p3zed/
spoiler
button

.btn::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-left: 0.3em;
  background: violet url('тут-картинка') no-repeat center / contain;
  }

Если отвечать на поставленный вопрос - то после текста должен идти слот под эту иконку.
Пустой div, у которого и будет этот background указан.
Таким образом, div всегда будет идти строго за текстом. Вы сможете задать ему отступ от текста, размеры, и прочие стили.

div а не span просто потому что span всё таки обёртка для текста. А иконка это не текст.

<div style="width: 100%; background-color: #fff;">
  <button style="width: 100%;height: 50px;">
    Зарегистрироваться
    <div style="background-size: 20px 20px;background-repeat: no-repeat; background-position: right 0 center;background-image: url(https://img2.freepng.ru/20180325/qaw/kisspng-email-computer-icons-clip-art-coin-5ab83d2671f511.2388637315220237184668.jpg);"></div>
  </button>
</div>