how to display icon in center in ant design Button

user_5744975 0
Viewed 5124

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

enter image description here

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>
antd reactjs stylesheet styles javascript
3 Answers

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

svg { vertical-align: baseline; }

user_125321510

You need import Button component from antd library

import { Button } from "antd";
user_184141860

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

user_156938010
Related