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

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,
  },
});

Just pass your tag as the title. Material-ui will take a node as title

Something like

 <AppBar
    title={<img src="https://unsplash.it/40/40"/>}
  />

Working pen

Hope this helps!

Related