title: how to display icon in center in ant design Button
body: <p>I am using ant design <code>Button</code> and setting the icon but the icon is not displayed in center inside button.</p>
  <p><a href="https://i.stack.imgur.com/erZKv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/erZKv.png" alt="enter image description here" /></a></p>
  <pre><code>import &quot;antd/dist/antd.css&quot;;
  import { DeleteOutlined } from &quot;@ant-design/icons&quot;;
  
  &lt;Row&gt;
    &lt;Col span={2} style={{ padding: &quot;5px&quot; }} &gt;
                                  &lt;Button
                                      type=&quot;primary&quot;
                                      size=&quot;middle&quot;
                                      shape=&quot;circle&quot;
                                      danger
                                      icon={&lt;DeleteOutlined /&gt;}
  
                                      onClick={() =&gt; deleteSkid(index)}
                                  /&gt;
                              &lt;/Col&gt;
  &lt;/Row&gt;
  </code></pre>
  <p>I also tried like this but there's no change.</p>
  <pre><code>&lt;Row&gt;
    &lt;Col span={2} style={{ padding: &quot;5px&quot; }} &gt;
              &lt;Button
                 type=&quot;primary&quot;
                 size=&quot;middle&quot;
                 shape=&quot;circle&quot;
                 danger
                 onClick={() =&gt; deleteSkid(index)}
               &gt;
                     &lt;DeleteOutlined /&gt;
                &lt;/Button&gt;
      &lt;/Col&gt;
  &lt;/Row&gt;
  </code></pre>