title: Material ui <Icon> doesn't render correctly
body: <p>I am new into react and i am using material-ui to get things done.</p>
  
  <p>The problem i am having is that icon doesnt show up even though per <a href="https://material-ui.com/style/icons/" rel="nofollow noreferrer">material-ui docs</a> it should work :</p>
  
  <p>per docs</p>
  
  <pre><code>import Icon from '@material-ui/core/Icon';
  
  ...
  
  &lt;Icon className={classes.icon} color="action"&gt;
      add_circle
  &lt;/Icon&gt;
  </code></pre>
  
  <p>i am trying to get nav items using:</p>
  
  <pre><code>import React from 'react';
  import { NavLink } from 'react-router-dom'
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import Icon from '@material-ui/core/Icon';
  import InboxIcon from '@material-ui/icons/Inbox';
  import ListItem from '@material-ui/core/ListItem';
  import ListItemIcon from '@material-ui/core/ListItemIcon';
  import ListItemText from '@material-ui/core/ListItemText';
  import _ from 'lodash';
  
  
  const SideMenuItems = ({ menuItems }) =&gt; {
  
      return _.map( menuItems ,( menuItem )=&gt;{
  
          const { text, link, icon } = menuItem;
  
          return (
              &lt;NavLink to={link} key={link}&gt;
                  &lt;ListItem&gt;
                      &lt;ListItemIcon&gt;
                          &lt;Icon&gt;add_circle&lt;/Icon&gt;
                      &lt;/ListItemIcon&gt;
                      &lt;ListItemText inset primary={text} /&gt;
                  &lt;/ListItem&gt;
              &lt;/NavLink&gt;
          );
      });
  };
  </code></pre>
  
  <p>everything renders fine BUT icon, which renders just text. i have tried it with declaring explicit icon and it worked (e.g <code>&lt;HomeIcon/&gt;</code>) but i need it to be dynamically generated from config object so i can not use that...</p>
  
  <p>Any help or explanation would be appreciated 
  Thanks in advance</p>