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

javascript html reactjs icons ant-design-pro
Gianluca Filitz picture Gianluca Filitz · Jan 31, 2019 · Viewed 15.4k times · Source

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

Answer

&#223;iansor &#197;. &#197;lmerol picture ßiansor Å. Ålmerol · Jan 31, 2019

It should be

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

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

Related questions

Get form data in ReactJS

I have a simple form in my render function, like so: render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={…

Read More
Concatenating variables and strings in React

Is there a way to incorporate React's curly brace notation and an href tag? Say we have the following value in the state: {this.state.id} and the following HTML attributes on a tag: href="#demo1" id="demo1" Is there …

Read More
Render HTML string as real HTML in a React component

Here's what I tried and how it goes wrong. This works: <div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} /> This doesn't: <div dangerouslySetInnerHTML={{ __html: this.props.match.description }} /> The description property is just …

Read More