Material-ui: An example of how to integrate material-design-icons?

Created on 20 Feb 2015 · 13Comments · Source: mui-org/material-ui

"We are using Google's Material Design Icons for our documentation site along with some custom icons."

Is this correct? I can't find any reference to the material-design-icons in the doc source, only the custom icons. I'm struggling to understand how to integrate the material-design-icons. An example would help me a lot.

Source

0x80

Most helpful comment

I can sympathize with the lack of examples, while the link and docs provide the necessary information I would say it could be a bit confusing.

The quick fix is to follow Setup Method 1 from http://google.github.io/material-design-icons/ and include the one-liner which includes the font from google.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

As for self hosting, Setup Method 2, this worked for me:

Downloaded the font files (.eot, .tff, .woff, .woff2) into my public/fonts folder from https://github.com/google/material-design-icons/tree/master/iconfont
Update the url parts of the contents from the material-icons.css file at the same location - in my case the src attribute of font-face looks like this:
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/fonts/MaterialIcons-Regular.woff) format('woff'),
url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
Include the css file in my component using import and voila - my star actually showed a star :)

larsts on 18 Nov 2016

👍9

All 13 comments

Let me be a bit more specific. I've imported one of the svg sprite categories in my project's less file like this:

@import (less) "node_modules/material-design-icons/sprites/svg-sprite/svg-sprite-action.css";

This imported css is referencing an svg file in the same directory (svg-sprite-action.svg). Do I need to copy the svg file to my own project? I've tried adding material-design-icons to my browserify task, but it doesn't want to compile it because of the html files.

Is there a convenient way to include the library directly from the installed module, without manually copying files to my projects assets folder?

And I assume I need to use SvgIcon and not FontIcon? But now I just have a classname and not a svg string...

0x80 on 20 Feb 2015

I found the upgrade instructions in the changelog file. As I understand it the most straightforward way to integrate the material-design-icons is to create a React component for each and copy the svg string into the SvgIcon. This still feels a bit silly to me. Since I used about 15 different icons in my app I'd prefer to not create 15 components for them.

Maybe I should go with something like FontAwesome if I prefer convenience...?

0x80 on 20 Feb 2015

There are two methods for how you would integrate material design icons.

The first method is creating a component for each icon using mui.SvgIcon like this example. As you mentioned, this gets repetitive very quickly.

Another method would be to include an icon stylesheet in your project and reference class names of icons in the className property of mui.FontIcon such as in this example. You can use services such as IcoMoon or FontAwesome to generate a stylesheet or use an existing stylesheet. This is more convenient when you expect to use many icons.

Both methods were used in the docs site. For the latter, we imported some of Google's Material Design icons into an IcoMoon project and added the stylesheet it generated to the project here. From there we simply reference the icon names.

mmrtnz on 20 Feb 2015

Thanks a lot I have things working now! :smile:

Maybe I am not the brightest bulb in the box, but I think this stuff can be quite confusing if you're new to all this baking your own font. Because your docs say you are using googles material design icons _along_ with some custom icons, I assumed Icomoon was an optional thing for creating fonts other than googles. And because the google docs suggest that you can just use npm to install the icons, I assumed this would be compatible with something like Browserify. Why else would I want to install the module with npm?

Anyways I'm glad it's sorted.

0x80 on 20 Feb 2015

You're welcome! I understand why that would be confusing if somone is not familiar with making custom fonts. We can definitely be more explicit about it on the docs.

Glad you got everything working :)

mmrtnz on 20 Feb 2015

Hi there,
i'm starting with react and i would like to use mdi in my project.
@mmrtnz your examples are not longer recheable.
Where could i find a documentation or eample how use mdi in a react.
thx

yooman00 on 24 Jun 2016

👍5

+1 to request of yooman00. I've checked the information in this thread but I still don't understand how to include the icons inside buttons.

ghost on 7 Sep 2016

can someone give us an example for it? the said link is unreachable.

akosialz on 4 Nov 2016

+1 to yooman00's request. Link is unreachable. The doc says you can use external services, but fails to demonstrate how to integrate.

rickymetz on 17 Nov 2016

From the material-ui docs "This example uses the Material icons font, referenced in the <head> of the docs site index page." You could try looking at that perhaps?

Or the material-design-icons docs linked from the Material-UI docs.

mbrookes on 17 Nov 2016

I can sympathize with the lack of examples, while the link and docs provide the necessary information I would say it could be a bit confusing.

As for self hosting, Setup Method 2, this worked for me:

Downloaded the font files (.eot, .tff, .woff, .woff2) into my public/fonts folder from https://github.com/google/material-design-icons/tree/master/iconfont
Update the url parts of the contents from the material-icons.css file at the same location - in my case the src attribute of font-face looks like this:
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/fonts/MaterialIcons-Regular.woff) format('woff'),
url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
Include the css file in my component using import and voila - my star actually showed a star :)

larsts on 18 Nov 2016

👍9

Updated Solution

Its really work for me ! Thanks @larsts

----------Re-Post---------

I can sympathize with the lack of examples, while the link and docs provide the necessary information I would say it could be a bit confusing.

The quick fix is to follow Setup Method 1 from http://google.github.io/material-design-icons/ and include the one-liner which includes the font from google.

As for self hosting, Setup Method 2, this worked for me:

Downloaded the font files (.eot, .tff, .woff, .woff2) into my public/fonts folder from https://github.com/google/material-design-icons/tree/master/iconfont
Update the url parts of the contents from the material-icons.css file at the same location - in my case the src attribute of font-face looks like this:
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(/fonts/MaterialIcons-Regular.woff2) format('woff2'),
url(/fonts/MaterialIcons-Regular.woff) format('woff'),
url(/fonts/MaterialIcons-Regular.ttf) format('truetype');
Include the css file in my component using import and voila - my star actually showed a star :)

I'm using react in my project

---------Paste-In-App.css-------
@font-face {
font-family: "Material Icons";
font-style: normal;
font-weight: 400;
src: url(../src/icons/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local("Material Icons"), local("MaterialIcons-Regular"),
url(../src/icons/MaterialIcons-Regular.woff2) format("woff2"),
url(../src/icons/MaterialIcons-Regular.woff) format("woff"),
url(../src/icons/MaterialIcons-Regular.ttf) format("truetype");
}

---------Paste-in-index.css------

.material-icons {
font-family: "Material Icons";
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. /
-webkit-font-smoothing: antialiased;
/ Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: "liga";
}

cardosoGui on 8 Jun 2018

after: npm install material-design-icons
Just add this in your main css file:

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

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;

/* Support for all WebKit browsers. /
-webkit-font-smoothing: antialiased;
/ Support for Safari and Chrome. */
text-rendering: optimizeLegibility;

/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;

/* Support for IE. */
font-feature-settings: 'liga';
}