I am using ant design Button and setting the icon but the icon is not displayed in center inside button.

import "antd/dist/antd.css";
import { DeleteOutlined } from "@ant-design/icons";

<Row>
  <Col span={2} style={{ padding: "5px" }} >
                                <Button
                                    type="primary"
                                    size="middle"
                                    shape="circle"
                                    danger
                                    icon={<DeleteOutlined />}

                                    onClick={() => deleteSkid(index)}
                                />
                            </Col>
</Row>

I also tried like this but there's no change.

<Row>
  <Col span={2} style={{ padding: "5px" }} >
            <Button
               type="primary"
               size="middle"
               shape="circle"
               danger
               onClick={() => deleteSkid(index)}
             >
                   <DeleteOutlined />
              </Button>
    </Col>
</Row>

I am using ant design Button and setting the icon but the icon is not displayed in center inside button.

import "antd/dist/antd.css";
import { DeleteOutlined } from "@ant-design/icons";

<Row>
  <Col span={2} style={{ padding: "5px" }} >
                                <Button
                                    type="primary"
                                    size="middle"
                                    shape="circle"
                                    danger
                                    icon={<DeleteOutlined />}

                                    onClick={() => deleteSkid(index)}
                                />
                            </Col>
</Row>

I also tried like this but there's no change.

<Row>
  <Col span={2} style={{ padding: "5px" }} >
            <Button
               type="primary"
               size="middle"
               shape="circle"
               danger
               onClick={() => deleteSkid(index)}
             >
                   <DeleteOutlined />
              </Button>
    </Col>
</Row>

• javascript
• reactjs
• antd

• Its works fine with me. Seems like you might have some CSS which was causing the issue or may be installed version might have bug. – Shreyans Shrivastav Commented Jul 21, 2021 at 12:30

5 Answers 5

Are you using bootstrap or tailwind CSS? Try adding this:

svg { vertical-align: baseline; }

import { Button } from 'antd';
import { DeleteOutlined } from "@ant-design/icons";
 
<Button type="primary" danger shape="circle" icon={<DeleteOutlined />}></Button>

I solved this problem by adding a padding-bottom CSS property to the icon.

<LeftOutlined style={{ paddingBottom: "30px" }} />

You can add padding to the button itself and it will solve the issue.

You need import Button ponent from antd library

import { Button } from "antd";