Sometimes, we want to align horizontal icon and text in React Material UI.

in this article, we’ll look at how to align horizontal icon and text in React Material UI.

How to align horizontal icon and text in React Material UI?

To align horizontal icon and text in React Material UI, we can add flexbox styles with makeStyles.

For instance, we write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";
import Link from "@material-ui/icons/Link";

const useStyles = makeStyles(() => ({
  wrapIcon: {
    alignItems: "center",
    display: "flex"
  }
}));

export default function App() {
  const classes = useStyles();

  return (
    <div>
      <Typography variant="subtitle1" className={classes.wrapIcon}>
        <Link /> revolve
      </Typography>
    </div>
  );
}

to call makeStyles with a function that returns the styles for the wrapIcon class to return the useStyle hook.

We set wrapIcon to an object that sets the display CSS property to 'flex' and alignItems to 'center' to vertically align the items in the flex container.

Next, we set the className of the Typography component to classes.wrapIcon to apply the wrapIcon class to the Typography container component that we got from the useStyle hook.

As a result, we see that the Link icon is aligned with the ‘resolve’ text.

Conclusion

To align horizontal icon and text in React Material UI, we can add flexbox styles with makeStyles.