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?
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>
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.
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>
Related
I'm using a standard Material UI button that looks fine if I refresh the page that I am on. However, if I get to the page through a link from another page (I'm using react-router-dom) then the styling from the button is missing.
import {Link} from "react-router-dom";
<Link
color="inherit"
style={{textDecoration: 'none'}}
to={link}>
<Button variant="contained" color="primary">
test
</Button>
</Link>
Hey guys I'm a newbie trying to make a material UI temporary drawer and by default the value of the onClick event is a string and I have no idea how to convert it into an icon.
return (
<div>
{['Home'].map((anchor) => (
<React.Fragment key={anchor}>
<Button onClick={toggleDrawer(anchor, true)}>{anchor}</Button>
<SwipeableDrawer
anchor={anchor}
open={state[anchor]}
onClose={toggleDrawer(anchor, false)}
onOpen={toggleDrawer(anchor, true)}
>
{list(anchor)}
</SwipeableDrawer>
</React.Fragment>
))}
</div>
);
As you can see: "HOME" is a string and what shows up on the site UI is just the "HOME" word that is a button. How do I format the code so the "HOME" button would not display a string but an icon instead. I'd be using MenuIcon from Material UI Icons to take its place. Thanks!!
You can use Icon component and pass the string to the children props. Before that, remember to add the material icon font to your html file
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
import IconButton from "#material-ui/core/IconButton";
import Icon from "#material-ui/core/Icon";
...
{["home", "star", "add_circle"].map((name) => (
<IconButton>
<Icon>{name}</Icon>
</IconButton>
))}
Live Demo
I have an issue with my icons displaying:
Here is my code:
import SearchIcon from '#material-ui/icons/Search';
<Button variant='contained' className={classes.sendButton}>
Search
<img src={SearchIcon} alt='search'/>
</Button>
However, in the UI it gets rendered with the default 'broken-page' symbol. There is no error in console.
I have npm installed the latest #material-ui/icons=^4.9.1
I am unable to ascertain what is causing this issue.
Thanks
Ciao, to show Material UI icon is not necessary to use img tag. Just write:
import SearchIcon from '#material-ui/icons/Search';
<Button variant='contained' className={classes.sendButton}>
Search
<SearchIcon />
</Button>
And you should see your icon in button.
Anyway, I suggest you to use startIcon Button prop like:
<Button
variant='contained'
className={classes.sendButton}
startIcon={<SearchIcon />}
>
Search
</Button>
I am using Material-UI Avatar React component to show profile images. While compiling it can reach the image, there is no error in compile time. But image is not showing in the browser.
Please check this image to better understand
Codes:
import {avatar} from '../../images/avatar.png';
<Box component='div'>
<Avatar src={avatar} alt="Russel Crow"/>
</Box>
Please tell me why image is not showing in the browser and How to show it?
You used a named import, try it like this:
import avatar from '../../images/avatar.png'
You can try with inline url.
Try to run like this
import Avatar from '#material-ui/core/Avatar';
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
I am using Material UI. In the doc it shows that I can use:
import Icon from "#material-ui/core/Icon";
...
<Button variant="contained" color="primary" className={classes.button}>
blabla
<Icon className={classes.rightIcon}>send</Icon>
</Button>
but what it shows is a button with a text "BLABLA SE" which is wrong.
But when I use:
import SendIcon from "#material-ui/icons/Send";
....
<Button variant="contained" color="primary" className={classes.button}>
Blabla
<SendIcon className={classes.rightIcon} />
</Button>
It works just fine, with a text BLABLA and a send icon on the left side of it.
In the sandBox provided in the doc both work. So why the first case doesn't
work for me?
I think there is an error in this documentation example : https://material-ui.com/demos/buttons/#buttons-with-icons-and-label
import Icon from '#material-ui/core/Icon';
shoud be
import SendIcon from '#material-ui/icons/Send';
Here is a working version with this replacement : https://codesandbox.io/s/k3rjyoq32v
The module imported with this path #material-ui/core/Icon is not an svg icon itself, it is the Icon component documented here : https://material-ui.com/api/icon/
There are basically three ways of working with Icons in material-ui :
#material-ui/core/Icon : Component useful for displaying font icons. See https://material-ui.com/style/icons/#font-icons
#material-ui/icons : package with a set of Material Icons converted to SVG icons usable as React components. See https://material-ui.com/style/icons/#svg-material-icons
#material-ui/core/SvgIcon : Component to use any SVG as an icon. See https://material-ui.com/style/icons/#svg-icons
I think you've solved your own problem since I've seen you have got the icon to show in your codesandbox.
Had the same problem and found out that I didn't import the material icons font family in the index.html.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
Only with the above import will the component work.