CODEWITHSUNDEEP
reactjsmaterial-ui
MrToken
MrToken

Reputation: 87

Material UI <IconButton> not showing

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?

Upvotes: 5

Views: 10787

Answers (4)

user28050763
user28050763

Reputation: 1

I know this might sound simple : But in some cases maybe if theme is applied then the icon take white color by default or the background color the container.

try

  <IconButton>
    
            <AddCircleIcon sx={{color:"primary.main"}} /> 
    /// try using another color in place of primary.main`enter code here`
            
        </IconButton>

Upvotes: 0

wildgamer
wildgamer

Reputation: 355

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>

Upvotes: 0

Mike Mathew
Mike Mathew

Reputation: 932

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.

Upvotes: 1

Hemadri Dasari
Hemadri Dasari

Reputation: 34014

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>

Upvotes: 3

Related Questions