How to align horizontal icon and text in Material UI

Different approaches for alignment

Using the Stack component

If you're using Material UI v5, the Stack component will be your best friend. It's straightforward, clean, and handles alignment like a pro:

import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import LinkIcon from '@mui/icons-material/Link';

<Stack direction="row" alignItems="center" gap={2}>
    <LinkIcon />
    <Typography>Text beside icon</Typography>
</Stack>


The Stack component brings the tidiest trio: direction, alignItems, and gap properties. They all work together to make your design responsive and accessible.

Alignment with Grid system

Another route to an elegant alignment is through Grid component. It gives you more control over your layout:

import Grid from '@mui/material/Grid';
import Typography from '@mui/material/Typography';
import SearchIcon from '@mui/icons-material/Search';

<Grid container direction="row" alignItems="center" spacing={2}>
    <Grid item>
        <SearchIcon />
    </Grid>
    <Grid item>
        <Typography>Search</Typography>
    </Grid>
</Grid>


The magic here is that you can control spacing and alignment precisely, transforming even complex layouts into a walk in the park.

Inline Icons with Typography

If you want to keep it real simple, just nest your icons within Typography elements for an inline display that's easy on the eyes:

import Typography from '@mui/material/Typography';
import LinkIcon from '@mui/icons-material/Link';

<Typography>
    <LinkIcon />
    Sample Text
 </Typography>


Here, icons and text share the same typography properties. Drama-free alignment is the best kind, isn't it?

Responsiveness and wrapping

Handling wrapping with flexWrap

Are you looking to make your content more adaptive? Then reach for flexWrap: 'wrap':

<Box display="flex" alignItems="center" flexWrap="wrap">
    <StarIcon />
    <Typography noWrap>Text that should not wrap</Typography>
    {/* More items */}
</Box>


Just like that, your elements remain aligned but can migrate to a new line on smaller screens. It's like herding cats, but easier.

Customizing with makeStyles

Sometimes, the off-the-shelf styles just won't do. For those times, try makeStyles:

import { makeStyles } from '@mui/styles';

const useStyles = makeStyles((theme) => ({
    icon: {
        marginRight: theme.spacing(1),
        // Additional styles you fancy
    },
    // More styles here
}));

// Later, just sprinkle `classes.icon` where your icon component is rendered


Custom styles can be applied to text and icons alike, giving you a higher degree of control over your visuals.

Practice with CodeSandbox

The best way to learn is to roll up your sleeves and get your hands dirty. Try out these tips in a CodeSandbox example — a practical, interactive demo is a brilliant tool to beef up your understanding.