How do I reference Google Material-Design-Icons after npm install?

Question

So after doing npm install material-design-icons, how do I use them in my React application?

The methods included here doesn't include the npm method.

Solution 1

This is the way you can reference it (in your styles.css):

@import '~material-design-icons/iconfont/material-icons.css';

To use it:

<i class="material-icons">cloud_upload</i>

Solution 2

Open angular.json in your project, and add the following line node_modules/material-design-icons/iconfont/material-icons.css under projects => YOUR_APP => architect => options => styles

My angular version ng version:

Angular CLI: 8.0.3 
Node: 11.15.0
OS: linux x64
Angular: 8.0.1

Solution 3

Use this in index.html file after npm install material-design-icons . It works in my Angular Project.

<link href="../node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">

Solution 4

Using npm & laravel-mix you can do this:

// Material Design Icons - File: sass/app.scss
@import '~material-design-icons/iconfont/material-icons.css';

cmd:

npm run dev

html:

<i class="material-icons"> list </i>

Solution 5

You can use Material-UI which provides two components to render system icons: SvgIcon for rendering SVG paths, and Icon for rendering font icons.

If you are not already using Material-UI in your project, you can add it with:

// with npm
npm install @material-ui/core

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

SVG Material icons:

Material-UI provides a separate npm package, @material-ui/icons, that includes the 1,000+ official Material icons converted to SvgIcon components

1. Installation:

// with npm
npm install @material-ui/icons

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

2. Import the icons:

import AccessAlarmIcon from '@material-ui/icons/AccessAlarm';
import ThreeDRotation from '@material-ui/icons/ThreeDRotation';

3. Usage:

You can use material.io/tools/icons to find a specific icon. When importing an icon, keep in mind that the names of the icons are PascalCase, for instance:

• delete is exposed as @material-ui/icons/Delete
• delete forever is exposed as @material-ui/icons/DeleteForever

For themed icons, append the theme name to the icon name. For instance with the

• The Outlined delete icon is exposed as @material-ui/icons/DeleteOutlined
• The Rounded delete icon is exposed as @material-ui/icons/DeleteRounded
• The Two Tone delete icon is exposed as @material-ui/icons/DeleteTwoTone
• The Sharp delete icon is exposed as @material-ui/icons/DeleteSharp

There are three exceptions to this rule:

• 3d_rotation is exposed as @material-ui/icons/ThreeDRotation
• 4k is exposed as @material-ui/icons/FourK
• 360 is exposed as @material-ui/icons/ThreeSixty

Font Material icons:

1. Include Material icon font in your project, via Google Web Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

2. Import Icon component:

import Icon from '@material-ui/core/Icon';

3. wrap the icon name with the Icon component, for example:

<Icon>star</Icon>

more info here

View more solutions