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>