Material-ui: SVG icons throw a warning: Received `true` for a non-boolean attribute `fontSize`

[wendyperalta]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

There shouldn't be a warning when importing an svg icon. Or if there should be, please update docs to reflect the correct way of rendering the SVG icon in our code. Currently the docs don't show if any fontSize attribute needs to be passed in.

Current Behavior

When importing any svg icon, I get a warning saying:

Warning: Received true for a non-boolean attribute fontSize. If you want to write it to the DOM, pass a string instead: fontSize="true" or fontSize={value.toString()}.

I don't set a fontSize attribute in the tag, like how the docs show. This is part of what my code looks like:

import IconButton from 'material-ui-next/IconButton';
import DeleteIcon from 'material-ui-icons/Delete';

<IconButton onClick={() => this.setState({ openDialog: true })}>
 <DeleteIcon />
</IconButton>

Steps to Reproduce (for bugs)

1. Import any icon from material-ui-icons package.
2. Render it.
3. See warning in console.

NOTE: I tried this in codesandbox but did not see the warning. But here is the link regardless:
https://codesandbox.io/s/qvo302329q

Context

I'm currently in the processing of migrating all Button components from Material-UI v.0.20 to v.1 in my application at work. Currently, the way I'm avoiding getting this warning is by actually not using SVG icons at all and using, for instance <Icon>delete</Icon> instead.

Your Environment

| Tech | Version |
|--------------|---------|
| Material-UI | 1.0.0-beta.31 |
| material-ui-icons | 1.0.0-beta.17 |
| React | 16.2.0 |
| browser | Chrome v63.0.3239.84 |

[oliviertassinari]

@wendyperalta You are suffering from a bundle duplicated module:

• material-ui-next
• material-ui-icons that is importing material-ui

Upgrade everything and you should be good.

[ilyjs]

@oliviertassinari
this code : https://stackblitz.com/edit/react-17ners?file=index.js

https://react-17ners.stackblitz.io open console in this page
and you see:
warning.js:33 Warning: Received true for a non-boolean attribute fontSize

I did not understand how to fix this.