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

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.

Answer 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>

Answer 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

Answer 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">

Answer 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>

Answer 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

Answer 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');
}

Answer 7

That worked for me with laravel 8 & npm:
//terminal:
npm install material-design-icons
Then in your webpack.mix.js add
.postCss('node_modules/material-design-icons/iconfont/material-icons.css', 'public/css')
so it would look more-less like this:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.postCss('node_modules/material-design-icons/iconfont/material-icons.css', 'public/css')
.sourceMaps();
Next
//terminal
npm run dev
Because of that you will get material-icons.css file in your public folder so now, all you have to do is to include it in your html.
<link href="{{ asset('css/material-icons.css') }}" rel="stylesheet">