Is there a way to align a Material-UI icon with text so that the lowest point of the icon starts exactly at the baseline? We are using Material-UI Grid layout.
The issue we are facing is that if we align the icon using 'baseline', it appears too high. On the other hand, if we use alignSelf: 'center', it appears too low. At this stage, I am open to absolute positioning the icon to match the text baseline, but I am unsure if this can be achieved with flexbox.
<Grid container justify="space-between" xs={6}>
<Grid item>
<Button variant="outlined">Cancel</Button>
</Grid>
<Grid item>
<Grid container alignItems="baseline">
<Grid item>
<Grid container alignItems="baseline">
<Grid item style={{ alignSelf: "center" }}>
<Done />
</Grid>
<Grid item>
<Typography>Done!</Typography>
</Grid>
</Grid>
</Grid>
<Grid item>
<Button variant="outlined">Submit</Button>
</Grid>
</Grid>
</Grid>
</Grid>
In the current setup, the icon is rendering below the baseline while the text is correctly aligned: https://i.stack.imgur.com/I1iRi.png
https://codesandbox.io/s/elated-cerf-33mme?fontsize=14&hidenavigation=1&theme=dark