Updating Material Design Icons npm package [central issue]

[RoelN]

⚠️ This is the central issue to discuss upgrading the current outdated npm package on https://www.npmjs.com/package/material-design-icons All other issues relating to the outdated will be updated to point to this issue.

---

Updating Material Design Icons npm package

This document proposes a way to automatically publish the Material Design icons as an npm package.

Current version is 3.0.1 (https://www.npmjs.com/package/material-design-icons) published in early 2016.

Initial set up

Set your npm author info:

npm set init.author.name "Your Name"
npm set init.author.email "you@example.com"
npm set init.author.url "http://yourblog.com"

npm adduser

Create a package.json. This can be based on the last version when this repo still had a build process → https://github.com/google/material-design-icons/blob/a6145e167b4a3a65640dd6279319cbc77a7e4e96/package.json The devDependencies stuff can be omitted as this isn't in use anymore.

Initialize the npm package:

npm init

The package can then be manually published:

npm publish

Automated publishing to the npm registry

Each time you create a new release, you can trigger a workflow to publish your package.

https://docs.github.com/en/actions/guides/publishing-nodejs-packages

Updates necessary for backwards compatibility

Documentation

Based on decisions taken in this issue, update the documentation accordingly.

Web fonts missing

WOFF and WOFF2 files are missing. EOT was also delivered in version 3.0.1 but could be omitted since it's 2021?

Stylesheet is missing

Developers use the current npm package as such:

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

or even

<link href="../node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">

Note the change of directory from iconfont to font.

Most recent CSS file shipped → https://github.com/google/material-design-icons/blob/a6145e167b4a3a65640dd6279319cbc77a7e4e96/iconfont/material-icons.css

Sprites missing

There are no pre-generated sprite sheets. These must either be recreated, or be removed from the package, resulting in backwards incompatibility.

The original Gulp file could be brought back to life → https://github.com/google/material-design-icons/blob/a6145e167b4a3a65640dd6279319cbc77a7e4e96/gulpfile.babel.js

Notes

In 3.0.1 there doesn't seem to be an approach to use the SVG or PNG icons. People complain about the large package size on Stackoverflow. They could perhaps be omitted from the npm package, or a mechanism can be added to easily import them.

Alternative approach: deprecate or discourage from use

The 3.0.1 package has ~100.000 weekly downloads. Roughly 380 other packages depend on it. These users are all getting outdated icons.

If maintenance can't be guaranteed, the package can be abandoned and marked as "Deprecated" → https://docs.npmjs.com/deprecating-and-undeprecating-packages-or-package-versions

References and examples regarding npm should be removed from the repository and developer guide.

[RoelN]

Issues closable when this issue has been resolved can be found with the npm related tag: https://github.com/google/material-design-icons/issues?q=is%3Aissue+is%3Aopen+label%3A%22npm+related%22

[Download]

Thank you thank you thank you! This change is exactly what's needed! Great you are taking this seriously now. 👍

The 3.0.1 package has ~100.000 weekly downloads.

Wow! That gives you an idea of how many people / projects are using an outdated version of these icons without realizing it. This will all be so much better if you publish to NPM on release.

[thescientist13]

Hey @RoelN

Curious, and just want to be clear in my reading of this issue, but is it proposing a plan / path for:

1. How the repo owners will be publishing the material design icons?

or

2. How users can self publish a version of these material design icons?

The wording of the issue appears to be written in the 3rd person, maybe implying option 2. Is that the case? Are you a maintainer or just trying to share with the maintainers how to accomplish option 1?

Thanks in advance, and either way appreciate you putting this together and consolidating all these issues into once place. 💯

[RoelN]

@thescientist13 This is a proposal from me to the repo owners, so option 1 :-)

[tpham511]

Thanks for putting this together!

The original Gulp file could be brought back to life

Wondering if anyone had any luck with this. I tried to take a stab at it, but it might be too big of a task for a contributor like myself, due to all the restructuring that took place between v3.0.2 and v4.0.0.

[Download]

@tpapaz
Be wary of spending your time before the maintainers say anything. Because the maintainers of this repo reacted to my issue #1050 by basically saying Google does not have enough resources to publish this package to NPM regularly, and then actively destroying everything that was already in place. Yes, they went in and removed e.g. package.json etc after we had very clearly pointed out that everything was basically in place for them to just run npm publish to publish the latest version onto NPM. They could have just waited for a bit, or asked questions, but they didn't. After spending zero time on this repo for years, when they first started to spend some time on it, they saw people saying this repo is outdated, why are my icons missing etc and they didn;t think: we should make sure we fix this, no they thought 'this is too expensive, let's remove it' and immediately went ahead and did exactly the opposite from what people were asking them to do.

Also, it seems they don't hear us, or don;t care, because where are they? #1050 and this issue are the top issues for this repo right now. I basically am only still here because I opened #1050 and want to follow up on it. But in all other ways I already gave up on this repo. NPM install this stuff has been broken for years and now is even removed from this repo, so in essence this repo now has zero value to me. I am not going to create some personal fork and publish that to NPM, especially since that is now much harder because they removed all NPM things. And they are not going to publish it, apparently. So I just need to download the icon font directly and self-host it. That's annoying but not hard, so that's what I do now. This repo is now dead to me technically speaking since I don't see what it could bring me if not the source code, not the icons, not reliable documentation... then what?

If anyone that has commit/publish rights on this repo reads this; now might be a good time to speak. Because when issues like #1054 and this one are created by the community and the maintainers say nothing, that basically says this project is unmaintained and dead.

Let me get one thing straight about my opinion on this repo. I feel not supporting NPM is not necessarily wrong. In fact, since NPM is owned by Microsoft, one of Google's big competitors, that's a valid reason all by itself already. However, you are doing it all wrong the way you are doing it now. And frankly, you should be ashamed of yourself, the way you are handling this. And that's what pisses me off. Not the decision per se, but the reasons you give for it and the way you handle it. The reason you give 'not enough resources' shows zero respect for the fact that third-party developers buying into your Material Design philosophy also invest scarce resources. You are leaving them hanging and waste their resources so you can save some for Google.
And because you are still telling people to NPM install this thing, even though you decided on august 26 of 2020 already that you were not going to update the hopelessly outdated version that is currently published on NPM. Now I maybe could respect that decision if you would give some valid reasons for it (easy to find, NPM being owned by MS) and handle it correctly. But you disrespect all third parties spending time on following your instructions by telling us Google does not have the resource, even though your company is literally making tens of billions of dollars of profit each year. And then you remove everything from the codebase and STILL DON'T UPDATE THE DOCS.

Right now, some poor third party developer is trying to make an app for a client. He sold that client on the Material Design philosopy. And he is following your instructions to the letter and is running npm install -S material-design-icons, just like you tell him to. Too bad that at some point, for some mysterious reason, his icons won't work. It's going to cost him some precious resources to find out why. It might even involve reading this very issue comment. And there is the answer. You are giving him bad instructions. You never updated this repo, because you didn;t care. Then you decided you maybe care. You ran a survey to ask some strangers on the internet whether you should care. They told you you should. And they told you to update the NPM package. But you lack expertise in this area. Hey I get it, you are probably great icon designers! But this requires a different expertise. That your team does not have. There is no shame in it. But it does not translate to Google does not have the resources. It translates to 'we don;t know how to do it or why it is important'.

It's not that hard to do. And this community we have here is willing to help you with it. I personally would still help you with it, pissed as I am. And I would help you understand why it's important for this package to be on NPM. I can tell you about Less and Sass and CSS Modules and CSS in JS and Webpack and module loaders and bundles and code splitting and all those nitty gritty technical details that come into play when we try to write progressive web apps.

Because there is some real irony here.

Material Design is obviously blending web and apps into one uniform design philosophy. It very explicitly targets both native phone/tablet apps as well as the web. And it explicitly targets a wide range of screen sizes. Everything about it screams web app / SPA / progressive web app. Modern. And those modern web apps use modern toolchains to build. We want to install service workers, do client-side navigation, load bundles on demand, perform background requests, do offline caching etc etc. The very apps that Material Design is targetting are complex to build and rely on toolchains like Webpack that all use NPM. Yes,

Webpack ❤️ NPM.
CSS Modules ❤️ NPM
Sass ❤️ NPM
Terser ❤️ NPM
etc etc etc

The very developers building the very apps that Material Design targets rely on NPM the most of all developers in the web ecosystem. Old-school people using Bootstrap and jQuery don't care about NPM. But modern devs using React and Angular, they do care about NPM. A lot. Because they use it for everything. Well, everything except for Material Design Icons that is. Or at least, that's what they will eventually discover after they went through the whole 'read outdated docs, install outdated version, seems to work for a while, breaks mysteriously for some icons, spend hours debugging / researching / read this issue' cycle.

I know I'm ranting. I am passionate, I'm sorry. But I'm willing and able to spend this passion working FOR the project i.s.o. ranting against it. But I need a maintainer to speak up and tell us. Do you want to learn how to publish to NPM? May we help you? Will you please reconsider your decision and hear us out first? Because NPM is HUGE. It is THE most important repository in the Javascript ecosystem. And publishing to it is simple. We can teach you how.

[RoelN]

This issue proposes separate packages for web and SVG: #14

[ViRuSTriNiTy]

@Download Thanks for writing this. It's an absolute joke for a company like Google to respond with "lack of resources".

[jeserkin]

@RoelN when can community expect to get fonts for all themes?

And icons to match the ligatures, that are provided on the icon page

At the moment npm package provided ("material-design-icons": "^3.0.1") shows for example incorrect icon for qr_code as can be seen here

[marella]

I created the following npm packages that are automatically updated and published using GitHub Actions. So they will always have the latest icons.

material-icons

• Only WOFF2, WOFF fonts and CSS
• Includes outlined, round, sharp and two-tone icons
• Supports Sass

@material-design-icons/font

• Only WOFF2 fonts and CSS
• Lighter version of material-icons package
• Doesn't support older browsers such as Internet Explorer

@material-design-icons/svg

• Only SVGs
• Optimizes SVGs using SVGO

---

material-icons package has ~50,000 weekly downloads (~50% of official package). May be they can be listed as alternatives in the guide until the official package is updated.

[adamreisnz]

This is brilliant, thank you @marella !
We'll finally be able to switch to using SVG icons.

[oskarols-phrase]

Just deprecate this repo already and let the community maintain something better. It's deceptive and confusing to keep this outdated repo going and linking to it from the google font docs.

[jakiestfu]

Is there any update on this issue?