如何将 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>

它在页面上是这样渲染的

我想让图标出现在按钮文本的左侧

我尝试添加 CSS 伪选择器 :before 但不确定要添加到内容中的内容

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

Answer 1

只需覆盖按钮上的文本对齐方式

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

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