4.0.0 not published on npm

[woteska]

As far as I know this is the official repository of the icons on npm, but last the last publish was 4 years ago: https://www.npmjs.com/package/material-design-icons

End-users may have not internet when they would use a product that uses material-design-icons, so <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet"> will not work, icons will not be rendered, therefore I want to integrate the latest version of material-design-icons into the build process. (Angular 10+, Angular Material 10+, for <mat-icon>check</mat-icons>)

[JohnnyQQQQ]

As a workaround one can use this in the package.json file "material-design-icons": "google/material-design-icons#4.0.0"

[Download]

Yeah... The maintainers of this package have a really weird concept of how the Javascript / Node JS ecosystem works. You and I, we look at this and we say, surely this is an oversight / error. But actually the team maintaining this repo made a conscious decision not to publish new versions to NPM.

SEE NPM package is outdated #1050

They feel it is too much work to run npm publish:

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.

Instead, they now have a nice task ahead of answering issues like this one, which will keep on popping up, forever. Because no one else in the JS ecosystem understands why you would want to maintain a package and only publish to NPM once (so npm install does work, confusingly) and then never update it....

When a Google engineer states with a straight face that they do not have enough resources to maintain an NPM package for something that has been so central to Google's Web Dev efforts the past years (Material Design), I as an open source developer maintaining dozens of NPM packages in my spare time, just have to laugh... or cry... Google makes 30 BILLION per year but does not have the resources to run npm install when they release a new version... ok...

In the meantime, I asked them on august 27 whether they could then at least remove the instructions here that tell everyone to use npm install to get this package, ensuring that everyone that follows their instructions gets an outdated package.

Because developers expect the official Google package to be up-to-date, and because Google explicitly instruct us to use npm install, we all end up with an outdated package. It seems to work at first, so it may take days or even weeks before you attempt to use some newer icon. At that point it will not work but you have no idea why. And you don't suspect that this package is out of date, because surely Google would not make the mistake (conscious decision???) to not update this package right? So you assume you did something wrong and spend hours of research figuring out what's wrong before you eventually find out that yes, this package has not been updated for years now and that is actually by design????!!!!?!?!?

I wonder how many thousands of developer hours have already been burned by this. But hey they are not Google developers so it does not eat into the precious and scarce resources of Alphabet Inc. so it's all fine....

Yes I am quitte sour I know. Sorry. But Google still did not remove the instruction to npm install this package from the Material Icons website, in almost 2 months since I asked, so that tells you something about how high they value your time. As one dev commented in the referenced issue:

we will have to move away from this library.

Basically the only way to get the current font files is use the Setup via Google Web Fonts, or to Use Self-Hosting.

[lavyda]

I can understand the decision not to publish npm package, but it's a shame there was no mention about this. I hope this is just miscommunication and new version will be published or guidelines will be updated to not use npm package; because right now is super confusing... That said I would really, like really, appreciate to be able to use npm package since our app doesn't have access to internet (as many others I would image) and this very convenient way to include in distribution.

[vadimkuprienko]

Guys, do you have any update when this package(4.0.0) will be published to the NPM

[rmkane]

Well, it looks like they removed the package.json file in the root directory of this project. I guess this is no longer an npm dependency? I am assuming this is just an archive now and you will just need to manually download the project as a zip file when you want to use it locally.

Additionally, all usage documentation for this font states that you should use the CDN, but this does not work for offline or intranet applications.

[tmtron]

Additionally, all usage documentation for this font states that you should use the CDN, but this does not work for offline or intranet applications.

Well, the docs also clearly state, that the fonts are intended to work without CDN. The readme file states:

The font folder contains pre-generated font files that can be included in a project. This is especially convenient for the web;

and the linked Material Icons Guide even includes a dedicated section for Self hosting
which, BTW includes a broken link to the iconfont directory that has been removed since v4

[kebian]

/sigh... well that explains it. Yeah I got burned with this too.

[jeronimo93]

I really don't get it, why leave the npm package instructions in the documentation? In 3.0.1 there are icon refs that don't exist anymore like the exit_to_app icon which is now logout. So the icon refs in the current documentation dont even apply.

[rbalet]

Also had the same problem. I did here add the step needed to make it work on you laptop while working with local file.

[KeithPoonNS]

it was a bad decision not to upload the latest version to npm, and https://fonts.google.com/icons?selected=Material+Icons just showing the latest icons, which means there's no support to see which icons is support in the old version v3.0.0.

of course, a lot of systems is isolating from the internet

it seems they have no resources to take care the developers or web projects that like to use material-design-icons

I agree the documents is misleading

[KeithPoonNS]

plus, for your easy to "Self hosting" the fonts, please take this css + html example below

actual result

CSS

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(assets/scss/icons/material-design-icons-google.v4/font/MaterialIcons-Regular.ttf) format('truetype');
}
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons Outlined'),
    local('MaterialIcons-Outlined'),
    url(assets/scss/icons/material-design-icons-google.v4/font/MaterialIconsOutlined-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Material Icons Round';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons Round'),
    local('MaterialIcons-Round'),
    url(assets/scss/icons/material-design-icons-google.v4/font/MaterialIconsRound-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Material Icons Sharp';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons Sharp'),
    local('MaterialIcons-Sharp'),
    url(assets/scss/icons/material-design-icons-google.v4/font/MaterialIconsSharp-Regular.otf) format('opentype');
}
@font-face {
  font-family: 'Material Icons Two Tone';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons Two Tone'),
    local('MaterialIcons-Two Tone'),
    url(assets/scss/icons/material-design-icons-google.v4/font/MaterialIconsTwoTone-Regular.otf) format('opentype');
}

.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';
}
.material-icons-outlined {
  font-family: 'Material Icons Outlined' !important;
  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';
}
.material-icons-filled {
  font-family: 'Material Icons' !important;
  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';
}
.material-icons-round {
  font-family: 'Material Icons Round' !important;
  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';
}
.material-icons-sharp {
  font-family: 'Material Icons Sharp' !important;
  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';
}
.material-icons-two-tone {
  font-family: 'Material Icons Two Tone' !important;
  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';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/* end - google material design icon font */

html

<div>
<span class="material-icons">home</span> is Regular/Filled<br>
<span class="material-icons-outlined">home</span> is Outlined<br>
<span class="material-icons-round">home</span> is Round<br>
<span class="material-icons-sharp">home</span> is Sharp<br>
<span class="material-icons-two-tone">home</span> is Two Tone<br>
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx<br>
<mat-icon aria-hidden="false" aria-label="Example home icon">maps_home_work</mat-icon> is mat-icon element<br>
<mat-icon fontSet="material-icons-outlined" aria-hidden="false" aria-label="Example home icon">maps_home_work</mat-icon> is mat-icon element, outlined<br>
<mat-icon fontSet="material-icons-round" aria-hidden="false" aria-label="Example home icon">maps_home_work</mat-icon> is mat-icon element, round<br>
<mat-icon fontSet="material-icons-sharp" aria-hidden="false" aria-label="Example home icon">maps_home_work</mat-icon> is mat-icon element, sharp<br>
<mat-icon fontSet="material-icons-two-tone" aria-hidden="false" aria-label="Example home icon">maps_home_work</mat-icon> is mat-icon element, two-tone<br>
<mat-icon inline="true" aria-hidden="false" aria-label="Example home icon">home</mat-icon> is mat-icon element with inline<br>
</div>