CODEWITHSUNDEEP
svgreactjsmaterial-designmaterial-ui
Mad Bernard
Mad Bernard

Reputation: 372

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

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?

Upvotes: 10

Views: 22207

Answers (2)

Hitesh Sahu
Hitesh Sahu

Reputation: 45052

Here is the list of all; supported vector icons

https://www.materialui.co/icons

import them like this

import ModeTrain from 'material-ui/svg-icons/maps/train';
import ActionInfo from 'material-ui/svg-icons/action/info';
import ModeBUS from 'material-ui/svg-icons/maps/directions-bus';

the folder structure is 

material-ui/svg-icons -->category-->iconName

Use autocompletion of VS code to fetch/search icon for you

Then use icons like below eg ModeBUS

<ListItem
    leftAvatar={<Avatar icon={<ModeBUS />} />}
    rightIcon={<ActionInfo />}
    primaryText="Recipes"
    secondaryText={

      <p>
        <span >
          From: Station
            <br />
        </span>

        <span>
          To: Station
            <br />
        </span>
      </p>
    }
    secondaryTextLines={8}
  />

Upvotes: -3

hazardous
hazardous

Reputation: 10837

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.

Upvotes: 9

Related Questions