This solution works flawlessly!

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

Material-UI now offers components that handle this situation more effectively without the need for inline styles:

import Typography from '@mui/material/Typography';
import Stack from '@mui/material/Stack';

<Stack alignItems="center" direction="row" gap={2}>
  <LinkIcon />
  <Typography variant="body1">Rotate</Typography>
</Stack>

You can easily accomplish this in the latest version of MUI, MUI v5, by utilizing a combination of a Stack component and adjusting the alignItems prop to 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>

https://codesandbox.io/s/51940157-how-to-align-horizontal-icon-and-text-in-material-ui-uu2y5?file=/demo.tsx

To achieve this layout, Grid is the way to go. Here is an example of how you can implement it:

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

Check out the code snippet below. Feel free to customize the variant based on your specific needs.

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

<Typography variant="subtitle1" className={classes.iconContainer}>
    <LinkIcon className={classes.linkIcon}  /> rotate
</Typography>

Here is an alternative and straightforward approach:

<Container direction="row" alignItems="center">
     <SearchIcon /> example
</Container>

design

const design = 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>

you have the option to substitute display1 with display3 or any other typography variant in all 3 occurrences to adjust your text size. The   ensures that your text remains intact when it wraps.

This can be displayed as shown below

https://i.stack.imgur.com/jjp1F.png

using display3 along with a few additional styles for color enhancement.

When you place ListItemIcon and ListItemText inside a ListItem, it ensures that they stay on the same line and do not break:

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>Last updated: 1 hour ago</ListItemText>
</ListItem>

Check out this demo image:

You have the option to utilize Material UI's Flexbox component.

Here is a sample:

// ...
import { Box } from '@material-ui/core';
// ...

<Box alignItems="center" display="flex">
 <Box>
    <LinkIcon className={classes.linkIcon}  />
 </Box>
 <Box>
    revolve
 </Box>
</Box>

The alignItems: center attribute ensures vertical alignment of the internal items.

This will introduce some additional HTML elements. Nevertheless, through the component's API, you gain access to numerous customization options. For instance, there are methods to apply margin or padding consistently with your Material UI design. Additionally, adjusting item alignment based on specific needs is straightforward.

To include these, simply add them at the beginning

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

You can utilize them like so:

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

Take a look at this working example on CodeSandbox Here

To achieve vertical alignment of text and icon within MUI's Typography without relying on the variant attribute, you can opt for a simple solution by applying a display property directly to the Typography component:

<Typography display="flex">
    Hello!
    <Icon />
</Typography>

This method proved effective in my case.

All of the solutions have been reviewed, and I believe this is the most straightforward one:

<Typography><LinkIcon sx={{verticalAlign:"middle"}}/> RESOLVE</Typography> 

This solution also supports inline images for aligning them with text.

Encountering a similar issue, here is my approach:

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>

If the default mUI link icon doesn't meet your needs, you can create your own:

{/* this is the same chained icon used in own material-ui library, 
not sure why it's not available 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....
...
<Resolve>
  <CustomLinkIcon 
     {/* adjust margin top if needed */}
     style={{ marginRight: '3px', marginTop: '3px' }} {
  />
  <p>resolve</p>
</Resolve>

One recommended approach is to utilize it in the following manner:

  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>

By using this solution, the icon will seamlessly blend with your typography style, eliminating the need to constantly rewrite the style when making changes

<Typography component={Stack} direction="row" alignItems="center" color="secondary">
     <EditIcon fontSize="inherit" sx={{ marginRight: 1 }} />
     Edit
</Typography>

Utilizing Typography to achieve precise horizontal alignment with icons

const customStyles = theme => ({
    icon: {
        fontSize: '1rem',
        position: 'relative',
        right: theme.spacing(0.5),
        top: theme.spacing(0.5),
    },
});


<Typography><CheckCircleIcon className={className={this.props.customStyles.icon}}/>Home</Typography>