How to make mui typography with icon in react js?
May 01, 2023Hi Friends 👋,
Welcome To aGuideHub!
To make mui typography with icon in React js, put your icon within the typography element. It will make mui typography with icon in react js.
Today, I am going to show you, how to make mui typography with icon in react js.
Installation
Install the following packages to use mui typography in react js.
npm
npm install @mui/material @emotion/react @emotion/styledyarn
yarn add @mui/material @emotion/react @emotion/styledInstall @mui/icons-material packages mui icon.
npm
npm install @mui/icons-materialyarn
yarn add @mui/icons-materialTable of contents
- Install MUI and create a new React app.
- Import Material-UI Typography.
- Make mui typography with icon Component.
Step 1: Install MUI and create a new React app.
First you have to install the React project. You should use create-react-app command to create a new React project.
npx create-react-app my-app
cd my-app
npm startStep 2: Import Material-UI Typography.
After installing MUI, you have to import your React component. To do this, add the following line to the top of your component file.
import * as React from "react";
import Typography from "@mui/material/Typography";
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
import "./App.css";Step 3: Make mui typography with icon Component.
You can use the Typography component in your react js. For example, The typography component is used to create text. but here i have to show icon with text . So I will put <DoubleArrowIcon /> in the typography component.
<Typography>
<div className="typography-1">
<DoubleArrowIcon /> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
</Typography>MUI material make mui typography with icon example.
The below code is an example, to make icon in Typography, you need to import Typography Component. first import '@mui/icons-material/DoubleArrow' then you can use this code <DoubleArrowIcon />.
App.js
import * as React from "react";
import Typography from "@mui/material/Typography";
import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
import "./App.css";
export default function SvgMaterialIcons() {
return (
<Typography>
<div className="typography-1">
<DoubleArrowIcon /> Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source.
</div>
</Typography>
);
}App.css
.typography-1{
display: flex;
justify-content: center;
text-align: left;
background-color: rgb(219, 12, 133);
color: rgb(255, 255, 255);
}In the above code example, I have used the @mui/material component and made mui typography with icon in react js.
Check the output of the above code example.
Here, we are provided code sandbox links for the above program make mui typography with icon in react js. Then you can use whenever you want and do the changes as per your requirements.
All the best 👍
