Cómo alinear el icono horizontal y el texto en Material UI

Question 1

Soy un novato en Material UI, ahora mi ícono y texto no están alineados:

no alinear

Mis resultados deseados:

mi código es:

<div style={{
    display: 'inline-flex',
    VerticalAlign: 'text-bottom',
    BoxSizing: 'inherit',
    textAlign: 'center',
    AlignItems: 'center'
}}>
    <LinkIcon className={classes.linkIcon}  />
    revolve
</div>

Probé cuadrícula y fila, pero no funcionó. ¿Alguien puede ayudarme?

Question 2

¡Esto funciona perfectamente!

<div style={{
    display: 'flex',
    alignItems: 'center',
    flexWrap: 'wrap',
}}>
    <LinkIcon />
    <span>revolve</span>
</div>

Question 3

Necesitas usar Grid. Algo así debería funcionar:

<Grid container direction="row" alignItems="center">
  <Grid item>
    <LinkIcon className={classes.linkIcon} />
  </Grid>
  <Grid item>
    revolve
  </Grid>
</Grid>

Question 4

Esto se puede lograr fácilmente en MUI v5 usando un Stack y establecer alignItems apoyar a center:

import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import AddCircleIcon from '@mui/icons-material/AddCircle';

<Stack direction="row" alignItems="center" gap={1}>
  <AddCircleIcon />
  <Typography variant="body1">text</Typography>
</Stack>

Question 5

Pruebe el siguiente código. Puedes usar variant según su requerimiento.

const useStyles = makeStyles(theme => ({
  wrapIcon: {
    verticalAlign: 'middle',
    display: 'inline-flex'
   }
}));

<Typography variant="subtitle1" className={classes.wrapIcon}>
    <LinkIcon className={classes.linkIcon}  /> revolve
</Typography>

Question 6

solución alternativa sencilla

<Grid container direction="row" alignItems="center">
     <SearchIcon /> example
</Grid>

Question 7

estilos

const styles = theme => ({
    icon: {
        position: "relative",
        top: theme.spacing.unit,
        width: theme.typography.display1.fontSize,
        height: theme.typography.display1.fontSize
    }
});

JSX

<Typography variant="display1">
    <Icon className={this.props.classes.icon}/>Your&nbsp;Text
</Typography>

podrías reemplazar display1 con display3 u otro variante de tipografía en los 3 lugares para elegir el tamaño del texto. El   asegura que su texto no se rompa entre palabras cuando se ajusta.

Para mí, esto puede hacer que se vea así

con display3 y algunos otros estilos agregados para el color.

Question 8

Teniendo ListItemIcon y ListItemText envuelto dentro de un ListItem lo mantendrá en una línea y evitará que se rompa:

import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
    
<ListItem >
  <ListItemIcon><AccessAlarmIcon color="secondary" /></ListItemIcon>
  <ListItemText>Updated 1 hour ago</ListItemText>
</ListItem>

Imagen de demostración:

Imagen de demostración

¿Ha sido útil esta solución?