AntD Change color of Icon

Question

I'm using v4 of AntD and have imported @ant-design/icons in order to use LeftOutlined.

In the docs for antd icons (https://ant.design/components/icon/) It lists the following for the fill attribute:

fill | Define the color used to paint the svg element | string | 'currentColor'

I assumed that this meant I could do this but it is not working:

<RightOutlined fill="#4E89FF" />

Instead for now I am using the style attribute and is working:

style | The computed style of the svg element | CSSProperties | -

<LeftOutlined style={{color: "#4E89FF"}} />

---

. .

Did I misunderstand the fill attribute?

Iapetus

Answer 1

That section of the docs you reference is for custom SVGs that you import. The api for their icons such as the one's you're trying to use are above that.

Ferminafermion

Thank you, I don't know how I messed that! It looks like I am using the correct method. – Iapetus

Answer 2

The correct way to change the color of the icon provided in the document is to use the twoone color icon component.

Example

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

return (
...
  <EditTwoTone
    style={{ fontSize: "20px" }}
    twoToneColor={isTrue ? "black": "red"}
  />
...

)

Thanks

Ossie

Answer 3

Just another (better, somehow) way when using defaul palette. Colors are array where each item is the hex value. Refer to colors:

import { red } from "@ant-design/colors";

return (
    <MinusCircleOutlined style={{ color: red[5] }} />
);

Bazemore