Как установить значок Antd как псевдоселектор :: before кнопки?

Question

В настоящее время я передаю значки в качестве опоры компоненту кнопки

<div className="offer-actions">
          <Button type="link" icon={<EyeOutlined />}>
            View
          </Button>
          {offer.pause ? (
            <Button type="link" icon={<PlayCircleOutlined />}>
              Resume
            </Button>
          ) : (
            <Button type="link" icon={<PauseCircleOutlined />}>
              Pause
            </Button>
          )}
          <Button type="link" icon={<EditOutlined />}>
            Edit
          </Button>
</div>

И он отображается на странице следующим образом

I would like to have the icons appear to the left of the button text

введите описание изображения здесь

Я пробовал добавить псевдоселектор CSS: раньше, но не уверен, что добавить к контенту

:before
{
    position:absolute;
    content:"";
}

Answer 1

Просто переопределите выравнивание текста на кнопке

<Button type="link" className="my-custom-button" icon={<EyeOutlined />}>
  View
</Button>

.my-custom-button {
  text-align: left
}