how to import all icons in Material Design from react-icons

Question

I could not find anywhere in the documentation and on google how to use

import * as MaterialDesign from "react-icons/"

in the render fonction.

Thank you for understanding.

Answer 1

To include all icons in one; You must use this code!

import * as MaterialDesign from "react-icons/md";

To use an icon: ( <MaterialDesign.IconName /> )

<MaterialDesign.MdHelp />

Note: Make sure you have installed the react-icons package!

Answer 2

That's a lot of bloat to import all those icons in a project. If you're trying to get just the library for Material Design icons you can use something like @react-md/material-icons.

Installation

yarn add @react-md/material-icons @react-md/icon

Usage

import { render } from "react-dom";

import {
  AccessAlarmFontIcon,
  AccessAlarmSVGIcon,
  Rotation3DFontIcon, // the sprite name for this was 3d_rotation.svg
  Rotation3DSVGIcon, // the sprite name for this was 3d_rotation.svg
  HomeFontIcon,
  HomeSVGIcon,
} from "@react-md/material-icons";

const App = () => (
  <main>
    <AccessAlarmFontIcon />
    <AccessAlarmSVGIcon />
    <Rotation3DFontIcon />
    <Rotation3DSVGIcon />
    <HomeFontIcon />
    <HomeSVGIcon />
  </main>
);

render(<App />, document.getElementById("root"));

Github

Or just use

yarn add @material-ui/core @material-ui/icons

then call the icon

import MenuIcon from '@material-ui/icons/Menu'

and in your component just add <MenuIcon/>. There is a way to search for any Material Icon.