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>
Related
Everything is in the title. Here is the CodeSandbox with reproduction !
When using MUI's ButtonGroup, the layout is fine with three "regular" buttons:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
But as soon as we add an href to one of the buttons, it breaks the layout, like so:
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button href="test.com">One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
Result:
Is there any way to fix this ? I don't want to have to use the trick of onClick and location.replace or location.href...
Also, maybe I should post this as an issue on MUI's GitHub? I'm guessing only if it is relevant and not fixable, but there are so many I doubt they would see it.
Use the prop LinkComponent="button":
import * as React from "react";
import Button from "#mui/material/Button";
import ButtonGroup from "#mui/material/ButtonGroup";
export default function BasicButtonGroup() {
return (
<ButtonGroup variant="contained" aria-label="outlined primary button group">
<Button LinkComponent="button" href="test.com">
One
</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
);
}
Demo: https://codesandbox.io/s/basicbuttongroup-material-demo-forked-43pmhn?file=/demo.js:0-430
I've created a React RTK application with mainly MUI Components.
Suddenly (and I can' reconstruct where when or why) the Mui <Badge> is not showing in my app, although it is in plain sight in the DevTools, elements.
The code that leads to this example page is:
import { Badge, Button } from "#mui/material";
import React from "react";
export default () => (
<div>
<Badge variant="dot" badgevalue={10}>
<Button variant="outlined">test</Button>
</Badge>
</div>
);
I've tried a lot, but with no succes. Can anyone help me out what the problem is here?
you have not added color props to badge. thats why its not displaying. also I checked the badge API. there is no badgeValue props. but there is badgeContent props. https://mui.com/api/badge/
<div>
<Badge variant="dot" badgevalue={10} color="primary">
<Button variant="outlined">test</Button>
</Badge>
<Badge variant="dot" badgeContent={10} color="primary">
<Button variant="outlined">test</Button>
</Badge>
</div>
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>
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.
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>