Material Design icons by Google

An icon font is being worked on at the moment and we're hoping to ship it sometime soon :) This issue is mostly a placeholder to remind us to include it.

Recently four new themes of icons are available: outlined, rounded, two tone, and sharp. Are these available on Google fonts? If not is there a timeline on when they will be added? Thanks.

I am unable to install material-design-icons from npm.

When trying to install with npm version 3.10.3 (windows 10 machine), the extraction step:

\ extract:material-design-icons: sill doParallel extract 1

does not complete even after appr. 10min. The progress slash eventually stops spinning completely.

Your insights are most appreciated.

Hi,

Material icons doesn't seems to vertical align themselves when placed alongside any text.

Issue:

I am using this code:

<p><i class="material-icons">&#xE8B5;</i> Open 7 Days</p>

Let me know if I am doing anything wrong.

I am using Bootstrap v 3.3.5.

These icons do appear to exist somewhere, e.g. https://www.gstatic.com/images/icons/material/system/2x/post_gplus_black_24dp.png https://www.gstatic.com/images/icons/material/system/2x/post_facebook_black_24dp.png https://www.gstatic.com/images/icons/material/system/2x/post_twitter_black_24dp.png

They're also listed as Google-made icons on https://materialdesignicons.com/, e.g. https://materialdesignicons.com/icon/facebook-box

However, they are nowhere to be found in this repo.

I referred to this link http://google.github.io/material-design-icons/#getting-icons

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

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

I replaced the url with the location of the material design icons folder but it won't show up. Using the link to the Google Web Font, it works perfectly I used the svg version and it works perfectly too.

Installing material-design-icons via bower, npm, jspm etc pulls down the svgs and other artefacts, which is pretty big (26.9MB). Can there be a release that includes just the icon fonts themselves?

Its possible to reference the google web font url but that creates an external dependancy.

I often find myself searching for icons on the material icons page and being unable to find the icon I am looking for, simply because of inconsistent or strange naming.

I think the biggest problem stems from the fact that some icons are named according to what they are used for, not what they actually represent. And this can make them really a pain to find.

To name a few examples,

Three icons for the same thing. Why not just "clock"?

How about "bag" or "shopping bag"? I knew this icon existed and spent 10 minutes looking for it because searching for "bag" didn't yield any results.

Why not "wrench" or "tool"?

Etcetera, there are many more examples like these.

When using Google Chrome Version 61.0.3163.14 (Official Build) dev (64-bit) your searchable icon website will say label names but not render icons. In IE it's fine, as well as icons on my site.

I'm using MaterialDesign icons on my application, however, it isn't working on IE 11 (version 11.576.14393.0).

In my HTML code, I have the following element:

<i class="material-icons">&#xE853;</i>

However, I also tried the normal icon name such as:

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

It's working on other browsers, and all the .css features are from the boilerplate that I got on Material Design's page.

Nothing is appearing to me on my page.

I tried to set the following styles:

text-rendering: optimizeLegibility;
font-feature-settings: 'liga';
ms-font-feature-settings:'liga'

However, nothing is working.

Is there a way to get a list (JS) of the whole available material-design-icons icons preferably grouped by category ?

Can I get this list using the NPM package ?

Thanks.

I have to adjust font size to get correct render in safari

<div style={{ display: 'flex', flexDirection: 'column' }}>
  <div style={{ display: 'flex' }}>
    <span className="material-symbols-rounded" style={{ fontSize: 23 }}>
      lunch_dining
    </span>
    <span className="material-symbols-rounded" style={{ fontSize: 24 }}>
      lunch_dining
    </span>
    <span className="material-symbols-rounded" style={{ fontSize: 25 }}>
      lunch_dining
    </span>
  </div>
  <div style={{ display: 'flex' }}>
    <span className="material-symbols-rounded">home</span>
    <span className="material-symbols-rounded">favorite</span>
    <span className="material-symbols-rounded">grade</span>
  </div>
</div>

Expected result (chrome desktop & android):

Result in safari (ios 16.2):

    We need a non-binary icon as well. 

https://icon-sets.iconify.design/mdi/gender-non-binary/

Originally posted by @loolooii in https://github.com/google/material-design-icons/issues/242#issuecomment-1369792891

So when taking any measurement the system should be calibrated, and this can give a confidence in the measurement, so the water you drink can be checked with a system that's had a three point, two point or single point test; then in operation the readings from the sensor may indicate that the process of calibration is required;

So I want device to show is it calibrated hence i trust reading, then when I do the calibration am I doing single, double or triple point process, then as time goes by the re-calibration should be done so I get warning\critical and then a danger so asking for seven icons:-

Calibration:- As a category I guess also with bar so not-calibrated used on new devices Calibration Levels :- three point, two point or single point Confidence in Calibration:- Good, warning, error

Need more flexibility/matching styles to go with mobile_friendly, phonelink_erase, and the other phonelink icons like phonelink_setup and phonelink_lock. I would like the new icons to show a warning and an unknown if possible. Perhaps something like these:

Thanks in advance!!