Both right and left aligned icons in AppBar with material-ui next

You can use flexbox to control the alignment of elements in the toolbar…

One option is to add flex: 1 to the logo element. It will expand to fill the available space in container. All the elements after logo will be aligned to the right.

OR

Use margin-left: auto to align the second group of buttons to the right side of the flex container.

Here is a live example

const styles = {
  // this group of buttons will be aligned to the right side
  toolbarButtons: {
    marginLeft: 'auto',
  },
};

const Demo = ({ classes }) => (
  <AppBar position="static">
    <Toolbar>
      <IconButton color="inherit">
        <MenuIcon />
      </IconButton>
      <Typography variant="title" color="inherit">Title</Typography>
      <div className={classes.toolbarButtons}>
        <IconButton color="inherit"><EditIcon /></IconButton>
        <IconButton color="inherit"><SaveIcon /></IconButton>
        <IconButton color="inherit"><MoreVertIcon /></IconButton>
      </div>
    </Toolbar>
  </AppBar>
);