Material icons

[fschmenger]

This branch adds material design icons (@mdi/font) and material icon (material-icons) NPM packages. While the first isn't strictly required, it gives us a bunch of new icon options. The difference in package sizes seem to be moderate - biggest change is in source maps.

Head
static/css/app.f0d6ecc014b266ef49f5ecf30858ce65.css 455 kB 1 [emitted] [big] app
static/css/app.f0d6ecc014b266ef49f5ecf30858ce65.css.map 592 kB 1 [emitted] app

90140d3: Added @mdi/font
static/css/app.edf256455dfa66015e7356a48407b18d.css 723 kB 1 [emitted] [big] app
static/css/app.edf256455dfa66015e7356a48407b18d.css.map 1.11 MB 1 [emitted] app

43daa29: Added material-icons
static/css/app.f246aeeafd13987c68f24912f85c6deb.css 725 kB 1 [emitted] [big] app
static/css/app.f246aeeafd13987c68f24912f85c6deb.css.map 1.12 MB 1 [emitted] app

[chrismayer]

Just for transparency: If the necessary icon set is added only the build size of the CSS increases in a minimal way from 455kb ➡️ 458kb. In case the second icon set is added the build size of the CSS gets slightliy bigger: 458kb ➡️ 725kb, which seems IMHO OK.

[chrismayer]

I tried to test the changes of this PR and it seems to be working for the dev setup (npm run dev)

But in case I build the same application (npm run buld) the icons do not seem to be resolved:

Am I missing something or is there something wrong?

[fschmenger]

My apologies for not testing this thoroughly.
It seems that for whatever reason the webfonts (e.g. /static/css/MaterialIcons-Regular.woff2) referenced in the respective css are not picked up by webpack. This also means that the package sizes increases above are not reported correctly, as there will be a few kB on top for the webfonts.

I'm looking for a short term fix for this. Otherwise I suggest you hold this PR back until we worked on #94

[fschmenger]

Ok, after spending some time looking through your build files, the problem appears to be, that you turned off the 'url' option in the css-loader for the production build.

From utils.js:

var cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', url: process.env.NODE_ENV !== 'production', sourceMap: options.sourceMap } }

I'm not entirely sure if I could be breaking something there by turning it always on. Do you remember where this code was coming from or what the intention was?

[fschmenger]

@chrismayer The issue with the production build should be fixed now.

The initial assessment of the package sizes was wrong. On top of that we get the actual fonts which are deployed inside the static/fonts directory. However keep in mind that the client will usually load only one set of the web fonts, for my browsers (Firefox + Chrome) these are the woff2 fonts. So the situation is not as bad as it looks at first glance. Also it seems that currently only MaterialIcons-Regular is loaded (about 280kb) which would be loaded from Google CDN anyway - others are not yet in use but could be in the future.

`

static/fonts/MaterialIcons-Regular.225ce29.eot 114 kB [emitted]
static/fonts/materialdesignicons-webfont.174c02f.ttf 1.03 MB [emitted] [big]
static/fonts/materialdesignicons-webfont.147e337.woff 465 kB [emitted] [big]
static/fonts/materialdesignicons-webfont.64d4cf6.eot 1.03 MB [emitted] [big]
static/fonts/MaterialIconsOutlined-Regular.a59f4f5.eot 276 kB [emitted] [big]
static/fonts/MaterialIconsTwoTone-Regular.34547a5.otf 553 kB [emitted] [big]
static/fonts/MaterialIcons-Regular.fdac816.woff2 100 kB [emitted]
static/fonts/MaterialIconsOutlined-Regular.29e252f.woff2 125 kB [emitted]
static/fonts/MaterialIconsTwoTone-Regular.cb9b33e.eot 553 kB [emitted] [big]
static/fonts/MaterialIconsSharp-Regular.90e0c78.eot 233 kB [emitted]
static/fonts/MaterialIconsSharp-Regular.4f8b729.otf 233 kB [emitted]
static/fonts/MaterialIconsTwoTone-Regular.6445961.woff 272 kB [emitted] [big]
static/fonts/MaterialIcons-Regular.c1d575e.woff 128 kB [emitted]
static/fonts/MaterialIconsRound-Regular.1ee4845.eot 322 kB [emitted] [big]
static/fonts/MaterialIconsOutlined-Regular.fc4827f.otf 276 kB [emitted] [big]
static/fonts/MaterialIconsRound-Regular.0a6ccea.woff 158 kB [emitted]
static/fonts/MaterialIconsRound-Regular.4b6a341.otf 322 kB [emitted] [big]
static/fonts/MaterialIconsSharp-Regular.7351a6a.woff2 109 kB [emitted]
static/fonts/MaterialIconsTwoTone-Regular.cc1bc0a.woff2 174 kB [emitted]
static/fonts/MaterialIconsRound-Regular.923ea6d.woff2 134 kB [emitted]
static/fonts/materialdesignicons-webfont.7a44ea1.woff2 325 kB [emitted] [big]
static/fonts/MaterialIconsOutlined-Regular.46c0977.woff 145 kB [emitted]
static/fonts/MaterialIconsSharp-Regular.a3cccd1.woff 125 kB [emitted]
static/fonts/MaterialIcons-Regular.9fc042e.ttf 280 kB [emitted] [big]

`

[chrismayer]

LGTM, thanks for this and also for the transparent documentation / explanation about the build size impact.