Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

Things like

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

or

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

do not work

like image 467
Gianluca Filitz Avatar asked Jan 31 '19 09:01

Gianluca Filitz


People also ask

How do I change the icon size on my ANTD?

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

What is Ant icon?

The Ant-ICON Scientific Research Programme aims to answer fundamental science questions (as identified by the SCAR Horizon Scan and emerging issues), relating to the conservation and management of Antarctica and the Southern Ocean.

How do I import ANTD into react?

Import antd Now we install antd from yarn or npm. Modify src/App. js , import Button component from antd . import React from 'react'; import { Button } from 'antd'; import './App.


2 Answers

It should be

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

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

like image 107
ßiansor Å. Ålmerol Avatar answered Sep 18 '22 15:09

ßiansor Å. Ålmerol


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

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

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

enter image description here

like image 34
Kelum Sampath Edirisinghe Avatar answered Sep 19 '22 15:09

Kelum Sampath Edirisinghe