Material UI <IconButton> not showing

Question

I am using Material UI, and I have the following:

import IconButton from 'material-ui/IconButton';
<IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right" tooltipPosition="bottom-right" />

When I am testing the tooltip, the icons are not showing, but the tooltip is showing on hover. Can someone help me create an example? Am I missing the icon URL?

Answer 1

It seems that's an issue with Material-UI docs. Check this Link for more details

If you want to place github icon then you can try using SVG Icon. It seems you have to include google material icons stylesheet in your index.html to make it work.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Generally if we want to use svg icons I do it below way.

import IconButton from 'material-ui/IconButton';
import Remove from 'material-ui/svg-icons/Content/remove';

<IconButton tooltip="Hide" style={{float: 'right'}}  iconStyle={{marginTop: -25, color: myTheme.color}} onClick={this.removeMinus}>
   <Remove color=“red” />
</IconButton>

Answer 2

Make sure your <IconButton> has a child component that is an icon. In your example it is not rendering anything on the screen (unless you hover) because it has no icon reference.

Answer 3

I think your code is not correct, if you want to use IconButton, you should has an instance icon inside the IconButton, the code like this:

<IconButton>
  <DeleteIcon />
</IconButton>