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.
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>
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 like the look of the Material UI Styled Component api (not the styled-component library), but I'm having trouble turning my simple button component into a linked button.
How do I insert a react-router-dom link into a MUI Styled Component button?
Previously, the typical Material UI HOC api approach let me add a linked "reports" button as follows. It works great, but requires a lot more boilerplate (not shown here):
<Button
variant="contained"
color="primary"
className={classes.button}
component={Link}
to="/reports"
>
<ShowChartIcon className={classes.buttonIcon} />
Reports
</Button>
#1 Obvious Approach: When I follow this pattern and include the component and to properties my own MUI Styled Component called <MyButton>, I get a typescript error saying those properties don't exist.
#2 Different Approach: Following the pattern proposed in this material ui github issue, the button does indeed link to the reports screen, but the mui variant and color are lost:
<MyButton
variant="contained"
color="primary"
{...{
component: Link,
to: `/reports`
} as any}
>
<MyShowChartIcon />
Reports
</MyButton>
#3 Workaround Approach: A less desirable option is to wrap the button in a <Link>. That does create a working link, but it also brings in a little bit of unintended styling.
<Link to="/reports">
<MyButton
variant="contained"
color="primary"
>
<MyShowChartIcon />
Reports
</MyButton>
</Link>
Using the latest version of material-ui (v4.0.2) you can use the HOC component created with withStyles, but you will have to manually cast the custom component back to its original type:
const MyButton = withStyles(
createStyles({
root: {
color: 'red'
}
})
)(Button) as typeof Button
then you can use your custom component like you would the original one:
<MyButton component={Link} to="/blank-page">
my button
</MyButton>
Here is a working example: https://codesandbox.io/s/createreactappwithtypescript-n6wih
I found this solution from this comment: https://github.com/mui-org/material-ui/issues/15695#issuecomment-498242520.
I would like to use a custom svg icon instead of the default delete icon for the material ui chip element.
Is this possible or would it be a new feature request?
I was only able to change the color of the icon but not the icon itself...
import IconSVG from #materialui/icons/IconSVG
<Chip
label="delete me"
deleteIcon={<IconSVG />}
onDelete={this.deleteMethod}
/>
In the chip api of material ui there is a props : deleteIcon it allows to change the delete icon using onDelete
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>