How to import React Material UI icons?

Sometimes, we want to import React Material UI icons.

In this article, we’ll look at how to import React Material UI icons.

How to import React Material UI icons?

To import React Material UI icons, we’ve to install the @material-ui/icons package.

Then we can import icons from it.

To install it, we can run npm install @material-ui/icons with NPM or run yarn add @material-ui/icons with Yarn.

Then we can import an icon and render it with:

import React from "react";
import { DeleteForever } from "@material-ui/icons";

export default function App() {
  return (
    <div>
      <DeleteForever />
    </div>
  );
}

We imported the DeleteForever icon with:

import { DeleteForever } from "@material-ui/icons";

And then we rendered it in App with <DeleteForever />.

Conclusion

To import React Material UI icons, we’ve to install the @material-ui/icons package.

Then we can import icons from it.

To install it, we can run npm install @material-ui/icons with NPM or run yarn add @material-ui/icons with Yarn.