SVG icons with Material-UI: where to find, how to style?

Question

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?

Answer 1

Two ways...

1. Inline the svg using SvgIcon

   With the SvgIcon component, you can include the required Svg assets.

2. 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.