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

问题

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.

回答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>

回答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

回答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">

回答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>

回答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

回答6:

I made a copy of the "node_modules/material-design-icons/iconfont/material-icons.css", changed the urls in the file and then imported that copied file in my main stylesheet.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url('~material-design-icons/iconfont/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2') format('woff2'),
       url('~material-design-icons/iconfont/MaterialIcons-Regular.woff') format('woff'),
       url('~material-design-icons/iconfont/MaterialIcons-Regular.ttf') format('truetype');
}

来源：https://stackoverflow.com/questions/50692153/how-do-i-reference-google-material-design-icons-after-npm-install

标签

css

reactjs

npm

material-design

material-ui