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>

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>

puede reemplazar display1 con display3 u otra variante tipográfica 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.

¡Esto funciona perfectamente!

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

Pruebe el siguiente código. Puede utilizar la variant según sus necesidades.

 const useStyles = makeStyles(theme => ({ wrapIcon: { verticalAlign: 'middle', display: 'inline-flex' } })); <Typography variant="subtitle1" className={classes.wrapIcon}> <LinkIcon className={classes.linkIcon} /> revolve </Typography>

Tener ListItemIcon y ListItemText envueltos 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:

También puede usar el componente Flexbox de Material UI.

Por ejemplo:

 // ... import { Box } from '@material-ui/core'; // ... <Box alignItems="center" display="flex"> <Box> <LinkIcon className={classes.linkIcon} /> </Box> <Box> revolve </Box> </Box>

El alignItems: center alineará verticalmente los elementos internos.

Esto agregará un marcado adicional. Sin embargo, si observa la API del componente, hay mucha flexibilidad adicional. Como, por ejemplo, un método para usar margen o relleno que sea coherente con el resto de la implementación de la interfaz de usuario de Material. También es muy fácil alinear los elementos de manera diferente si se presenta el caso de uso.

Mismo problema aquí, esto es lo que hice.

 import LinkIcon from '@material-ui/icons/Link'; import styled from 'styled-components'; ... const Resolve = styled.div` display: flex; vertical-align: middle, `; <Resolve> <LinkIcon style={{ marginRight: '5px' }} /> <p>resolve</p> </Resolve>

Si no está satisfecho con el icono de enlace predeterminado de mUI, siempre puede hacerlo usted mismo:

 {/* this is the same chained icon used in the own material-ui, idk why this ins't avaiable yet */} function CustomLinkIcon(props) { return ( <SvgIcon {...props}> <path d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" /> </SvgIcon> ); } ... <Resolve> <CustomLinkIcon {/* adjust margin top if needed */} style={{ marginRight: '3px', marginTop: '3px' }} { /> <p>resolve</p> </Resolve>

solución alternativa sencilla

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

Puede importar estos en la parte superior

 import { Grid, Typography } from "@material-ui/core"; import LinkIcon from "@material-ui/icons/Link";

Puedes usar

 <Grid style={{ display: "flex" }}> <LinkIcon /> <Typography>Revolve</Typography> </Grid>

Ejemplo de Sandbox de muestra aquí

la mejor opción es usarlo así:

 import {Box, Typography} from '@material-ui/core' import LinkIcon from '@material-ui/icons/LinkIcon'; ........ <Box display='flex' alignItems='center'> <LinkIcon className={classes.linkIcon} /> <Typography variant='h5'> resolve </Typography> </Box>

Esto se puede lograr fácilmente en MUI v5 usando Stack y configurando alignItems prop al 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>