How can I line these icons and text to left padding on MUI React?

[gihihikikiaihi]

When the texts are different, it does not line up among others. I want to fix them to the left-side of the button, so everything is in line vertically.

And, these are the code.

  customButton: {
    width: "100%",
    borderRadius: 0,
    background: 'orange',
    boxShadow: 'none',
  },


      <Button
        variant='contained'
        color='secondary'
        onClick={handleToDashboard}
        className={classes.customButton}
        startIcon={<DashboardIcon style={{color: 'black'}}/>}
      >
        Dashboard
      </Button>
      <Button
        variant='contained'
        color='secondary'
        onClick={handleToMap}
        className={classes.customButton}
        startIcon={<MapIcon />}
      >
        Map
      </Button>
      <Button
        variant='contained'
        color='secondary'
        className={classes.customButton}
        startIcon={<DashboardIcon />}
      >
        HOW CAN I 
      </Button>