title: How to set Antd icon as a ::before pseudo selector of a button?
body: <p>Currently, I'm passing Icons as a prop to the button component</p>
  <pre><code>&lt;div className=&quot;offer-actions&quot;&gt;
            &lt;Button type=&quot;link&quot; icon={&lt;EyeOutlined /&gt;}&gt;
              View
            &lt;/Button&gt;
            {offer.pause ? (
              &lt;Button type=&quot;link&quot; icon={&lt;PlayCircleOutlined /&gt;}&gt;
                Resume
              &lt;/Button&gt;
            ) : (
              &lt;Button type=&quot;link&quot; icon={&lt;PauseCircleOutlined /&gt;}&gt;
                Pause
              &lt;/Button&gt;
            )}
            &lt;Button type=&quot;link&quot; icon={&lt;EditOutlined /&gt;}&gt;
              Edit
            &lt;/Button&gt;
  &lt;/div&gt;
  </code></pre>
  <p>And it's rendering like this on the page</p>
  <p><a href="https://i.stack.imgur.com/4zuUV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4zuUV.png" alt="enter image description here" /></a></p>
  <p>I would like to have the icons appear to the left of the button text</p>
  <p><a href="https://i.stack.imgur.com/U658T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/U658T.png" alt="enter image description here" /></a></p>
  <p>I tried adding a CSS pseudo selector :before but not sure what to add to content</p>
  <pre><code>:before
  {
      position:absolute;
      content:&quot;&quot;;
  }
  </code></pre>