NPM package is outdated

[Download]

I have

npm install --save material-design-icons

and in my code

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

It sort of works, but some icons are missing. For example qr_code shows a beautiful icon in the Icon Library hosted on material.io but simply seems to be missing from the NPM package. According to the Icon Library, it is in category 'communication', but if I check this repo the last commit to that category was 3 years ago and the last release 2.2.0 of anything new in that category was apparently 5 years ago.

If I use the Google Web Font for Material Icons, as in this codepen, it just works.

If I try to use the icons from the NPM package, it shows the wrong icon, as demonstrated in this codepen.

After perusing your issue list and PRs (having PR's sitting here for 3 years without a comment), my conclusion is you guys just stopped caring. You stopped publishing this package to NPM. But someone else (designers?) are still updating the icon font...

If it's not true what I'm saying, please correct me.

But if it is true, then please have the courtesy to update the README of this project saying it was an experiment and that people should use the Google Web Font if they want up-to-date icons. Because now you are sending us astray. We install this package and it seems to work until suddenly it does not and we spend valuable time figuring out you just stopped publishing new versions to NPM.

[esteladiaz]

Hello, I'm having the same issue. I would like to use the home_work icon, but it's rendering as two icons rather than one. This is fixed in version 4.0.0, but the NPM package is still outdated. Will the NPM package be updated with the new version as this repo has been?

[Rafal1]

Hello, I face the same issue, missing next_plan icon.

[davelab6]

@Download Thanks for filing this issue. The Google Fonts team recently adopted this project, and we ran a survey (see commit history of README) to find out more about what users like yourself wanted from this Github repo. We even considered formally freezing and archiving it, but we got a strong signal that it is valuable, so we are now starting to pay more attention to the issues and PRs here.

PRs to README are welcome :)

[Download]

Ok great that you are starting to pay more attention to it! 👍

I'd say the first thing to do is to make sure this repo gets back in synch with the icons in the Material Design Icons Library and make sure it's also published to NPM.

I wonder where the Icons Library itself get's it's icons from??

Somehow, it seems you guys found a way to update the icon library without updating this repo... That is... weird. In a good architecture, there is a master/leading source of information. To update everything at the same time, you make sure to update the master and all other (dependant) projects then update their dependency to the latest version and presto. In my mind, the Material Design Icons Library should be built on top of this repo. So the user interface shown there to search for icons, show details of the icons etc, should, below the surface, just use the NPM package from this repo. That way, the only way to update the Librray would be to update this repo, publish it to NPM and then update the dependency in the Library project.

Is the source code of the Library project available somewhere? I really wonder what it looks like. Did you guys really just copy over all the font files by hand to the library project?

PRs to README are welcome :)

You will first need to convince me you are serious about keeping this project alive, before I would be willing to spend time making PRs. Please update all icons to latest and publish an updated package to NPM. And point us to / publish the source code of the Library project... So we can make sure that when new icons are added, they are added in one leading/master place (I would assume, this very repo) and distributed to dependant projects from there.

[rsheeter]

make sure this repo gets back in synch with the icons in the Material Design Icons Library

See #1055.

and make sure it's also published to NPM.

We are low on time and resources. I appreciate that people want this and that it would add value. However, I do not currently have resources to commit to supporting an npm package. I believe we have provided everything needed to publish to npm if users are so inclined.

there is a master/leading source of information

Google's internal repository is master. I can see a somewhat compelling argument that this shouldn't be true, but that is the reality today and has been since the inception of the project. My team inherited it in this state and we do not have the resources to change that setup at this time.

[Download]

We are low on time and resources. I appreciate that people want this and that it would add value. However, I do not currently have resources to commit to supporting an npm package.

Wow. Just wow. That answer is quitte unexpected!
Google does not have the time or resources? Seriously?

You do know that, if this package is up to date, publishing to NPM is literally just

npm publish

right?

I don't even understand the value of this repo if you do not publish to NPM. The entire Javascript ecosystem is using NPM as the package manager. Publishing to NPM is what makes npm install material-design-icons work. If you don't publish your changes, running this command will just keep installing the last version that was published. So people will keep getting outdated icons. In response, they will probably keep creating issues here (since this repo is linked to from the NPM package and Google official docs). Creating a maintenance burden for you that will no doubt far outweigh the time saved by not publishing.

Not publishing to NPM is of course your choice. However, in that case, please remove all mentions of NPM installing this package from the official docs. You don't have to dig far to find them. The homepage of the Material Design Icons Library contains this section:

Icon font

For web projects, the best format is our easy-to-use icon web font.

Learn how to use icon fonts in our developer guide.

As far as I can tell, the page that section is linking to is the official developer guide for Material Design Icons. It has a section Getting the icons that states:

Installing icons from npm

Install the icons using npm package manager.

$ npm install material-design-icons

https://google.github.io/material-design-icons/#installing-icons-from-npm

So your official developer guide is giving us this command. When we run this command, we get the last version of this repo that was published to NPM. By not publishing to NPM, you are ensuring that this command will never give developers the latest version. If you decide you are not going to publish to NPM, please remove this section. Because you send developers like me on a wild goose chase. We follow your instructions, get outdated font files, notice that some icons are not working and spend valuable time trying to figure out why not, only to discover you are not publishing to NPM anymore, on purpose. This makes me angry to be honest. I just spend that time already. You don't want to spend the time to publish to NPM, so you make me spend the time to figure out why I'm not getting all icons, even though I followed all your instructions to the letter. Many more will spend that time for nothing in the future if you keep that instruction in there. So please remove it then.

Oh, while you are at it, also remove the section about installing from Bower, because Bower also uses the package as published to NPM. And so does Yarn. Also, tools like unpkg and browserify CDN are all using the NPM registry below the surface.

[iencotech]

I am also surprised that this amazing package cannot get updated in npm. This would force us to fork and publish our own packages to NPM... It would be much easier if the NPM package of this repo could get an update by doing npm publish as mentioned in the previous comment. I think the community would really appreciate that.

EDIT: I can see that from 3.0.1 to latest 4.0.0, the package.json was removed, so it seems that support for npm package was dropped. So we will have to move away from this library.

[austenstone]

The development guide still references NPM.

[austenstone]

Any alternatives to offline?
Without hosting the whole thing? Seems very large to host offline.

[iencotech]

@astone2014 It's not that huge if you want to host the files, you can try https://github.com/lotterfriends/material-icons-downloader

But if you don't want to host the files you can always use Google Fonts online

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

[austenstone]

The fonts in the fonts folder of this GitHub repo doesn't even have the latest icons.

Under font/README.md you'll find:

<!-- https://material.io/resources/icons/?style=baseline -->
<link href="https://fonts.googleapis.com/css2?family=Material+Icons"
      rel="stylesheet">

If you follow that link you'll find some css that you add to your project.

Just manually download the font flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 and include it in your project. (make sure to check readme for updated link).

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(assets/font/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Now all the icons work. The code changes were minimal and no extra libraries necessary.

To include outline, round, sharp icons you'll have to add those separate.

Because these icons are so rarely updated I think this solution will be fine.

[RoelN]

Thanks for this issue and the replies, and apologies for the slow updates. Thanks for bearing with us.

We're gathering all feedback and suggestions regarding updating the npm package in a central issue: #1129 Please have a look and see if the package, as published in the way suggested there, would suit your needs.

[znorman-harris]

In case this helps anyone else, I switched to this NPM package for my material icons https://www.npmjs.com/package/material-icons#available-icons.

I haven't had any issues, zero code changes for me, and it is frequently updated.

Not to be dramatic, and I'm sure lots of other people ran into this, but this is why I made the switch:

• Found a new icon online
• Realized it didn't work with my project
• Assumed my library was out of date
• Checked NPM and saw it hadn't been updated in years
• Thought "that's ridiculous, how has this extremely popular and fantastic library not been updated in 5 years?"
• Found another library with the material icons that was recently updated
• Made the switch
• Never looked back