How do I display an image on left of Material-UI AppBar, but retain the "hamburger" menu?

reactjs material-ui appbar

dommer · Nov 6, 2016 · Viewed 29.3k times · Source

I'd like to display an image on the left of a Material-UI AppBar, but keep the "hamburger" menu and have the image just to the right of that.

Is it possible? I can add an image to the left using

<AppBar title="My App"
        iconElementLeft = {<img src='header-logo.png' alt="Logo" />} />;

However, that replaces the "hamburger" menu, which is of no use to me.

I also tried creating an img as a child of the AppBar, but that puts the image to the right of any iconElementRight elements.

Answer

In material ui 4.3.2, there is no 'title' props for AppBar. So to add a logo try the following method.

<AppBar color="inherit">
    <Toolbar>
        <img src="logo.png" alt="logo" className={classes.logo} />
      </Toolbar>
</AppBar>

Use the css to restrict the logo size. i.e.

const useStyles = makeStyles({
  logo: {
    maxWidth: 160,
  },
});