Material UI Button - Align Ellipsis Label with Start Icon

Question

I'm trying to set a start icon on a button and also the text label could be very long to use ellipsis at the end. I can't figure it out a way to align the start icon and text at the same time while using ellipsis.

I've created a sandbox to show my example: Button Ellipsis example

How can I align the start icon and text so they are both in the same line?

Thanks

Answer 1

You can add MuiButton-startIcon in the styles, I provide you the styles code snippet you can try and hope this can help you.

const useStyles = makeStyles((theme) => ({
  button: {
    width: "220px",
    "& .MuiButton-label": {
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      overflow: "hidden",
      display: "inline-block"
    },
    "& .MuiButton-startIcon": {
      display: 'inline-block'
    }
  }
}));