How can I set the size of icons in Ant Design?

Question

So when I'm using an Icon in Ant Design it is always 14 * 14 px. Is there a way to set the size maually?

Things like

<Icon width={"20px"} type="setting" />

or

<Icon style={{width: '20em'}} type="setting" />

do not work

Answer 1

It should be

<Icon type="message" style={{ fontSize: '16px', color: '#08c' }} theme="outlined" />

https://codepen.io/anon/pen/wNgrWX

Answer 2

Can change the size of the icon using fontSize style property.

eg: use of style={{ fontSize: '150%'}}

<PlayCircleFilled style={{ fontSize: '150%'}} />

Answer 3

In the new antd Icon version, you can increase the size of the icon like this:

import { MessageTwoTone } from "@ant-design/icons";

And call it as:

  <div style={{ fontSize: "30px" }}>
        <MessageTwoTone />
      </div>

I tried using it as an attribute of <MessageTwoTone> but attribute no longer works like in the old version mentioned in the answers above.

Edited:- I was told later that the above will only work while the Icon inherits its font-size from its parent. So we should rather add the style attribute directly to the Icon

         <MessageTwoTone style={{ fontSize: "30px" }}/>

Answer 4

Not sure if its just for me, but as of today the accepted answer does not work, I made it work by putting a className inside the Icon Component, and targeting the svg of that class. here's an example

component.js

import { CheckCircleTwoTone } from '@ant-design/icons';

  <CheckCircleTwoTone
                    twoToneColor="#52c41a"
                    className="reg_icon"
                />

component.scss

.reg_icon {
    svg {
        font-size: 120px !important;
    }
}

Answer 5

Use <Icon style={{ fontSize: '30px'}} type="check-circle" />

Here is a working codepen: https://codesandbox.io/s/x7r7k7j6xw

Answer 6

If using the icon inside the button like this:

<Button type="text" icon={<GithubOutlined />} />

You can add these classes/styles and it will solve the issue for you (it solved it for me)

<Button type="text"
        className={styles.button}
        icon={<GithubOutlined className={styles.icon}/>}
/>

.button {
  
  // The wanted size...
  font-size: 2.5em;

  // Without it, changing the font size will cause problems.
  width: fit-content;
  height: fit-content;

  .icon {
    font-size: inherit;
  }
}

CodePen Demo

Answer 7

使用 javascript 的最佳方法

Icon.setTwoToneColor("#000");