SVG icons with Material-UI: where to find, how to style?
Two ways...
-
Inline the svg using SvgIcon
With the SvgIcon component, you can include the required Svg assets.
-
Importing existing material-ui assets Just import into a variable to use it.
import FileCloudDownload from 'material-ui/lib/svg-icons/file/cloud-download';
...
iconElementLeft={FileCloudDownload}
You will also see styling examples in the link above.
Mad Bernard
I've delivered code for multi-million user websites and framed-in mobile apps. I love solving real user problems, making elegant and accessible forms, and making sure that we're building what the company actually needs. My genius is in communicating with product people.
Updated on July 09, 2022Comments
-
Mad Bernard almost 2 years
On http://www.material-ui.com/#/components/app-bar it says that among the possible proprerties they support is "iconElementLeft ... element ... The custom element to be displayed on the left side of the app bar such as an SvgIcon."
What I have now isn't styled like the rest of the things on the menu bar... I'm pointing to a svg icon I found and using img attributes to try to fit it in. How could I make Material-UI style it like the native things?
export default (props)=>{ return ( <AppBar title={<span style={styles.title}><Link to="/" className="logoLink">GIGG.TV</Link></span>} className="header" iconElementLeft={<img src='../../public/img/rocket.svg' height='40' width='40' alt='' />} // showMenuIconButton={false} iconElementRight={ <IconMenu iconButtonElement={ <IconButton><MoreVertIcon /></IconButton> } targetOrigin={{horizontal: 'right', vertical: 'top'}} anchorOrigin={{horizontal: 'right', vertical: 'top'}} > <MenuItem linkButton={true} primaryText="Home" containerElement={<Link to="/" className="logoLink">GIGG.tv</Link>} /> <MenuItem primaryText="Sign in" containerElement={ <SignInModal/>} /> <MenuItem linkButton={true} primaryText="Login as Artist" containerElement={<Link to="/artistSignIn" >Sign in/Up </Link>} /> </IconMenu> }/> ) }
Alternatively, how could I look through all the icons in the Material-UI NPM package to see if they have something native that might work?