如何增加material-ui图标？

Question

I am importing an icon from material-ui and using in my JSX code as

Full code:

import ArrowUp from 'material-ui-icons/KeyboardArrowUp'
<Button fab color="primary">
  <ArrowUp style={{fontSize: '200%'}} />
</Button>

Using fontSize I cannot increase its size.

What is the proper way to handle it? What am I doing wrong?

Answer 1

Try adding the label style of the button like below

import ArrowUp from 'material-ui-icons/KeyboardArrowUp'

<Button fab color="primary" labelStyle={{ fontSize: '200%' }}>
  <ArrowUp />
</Button>

Answer 2

Create class selector in icon component like this

<Button fab color="primary">
  <ArrowUp className="arrow-up" />
</Button>

then write CSS code and give your style as important like this

.arrow-up{
 font-size: 20px !important;
}