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

21,101

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.

Share:
21,101
Mad Bernard
Author by

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, 2022

Comments

  • Mad Bernard
    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?