mdi-font-build-subset

Synopsis

Dev helper package to build a reduced version of the Material Design Icons webfont:

• Skips ttf and eot fonts, only generates woff and woff2 fonts and matching css - that's enough for the modern web.
• The font contains only the given subset of icons - can save a lot of space.

Define, build, use

Generate a new, reduced mdi webfont

1. Prerequisite: Have a working Node.js environment.
2. cd into this dir, run npm install or yarn install to load the dev dependencies.
3. Add the names of the icons you want to the ./subset.json file. Leave the top 3 there, they are required for the ./dist/index.html sample page.
4. npm build or yarn build creates the fonts, css, and sample page in the ./dist folder.
5. Optional: cd dist, run http-server and check the sample page containing your icon selection at http://localhost:8080.

Use the font in an app

1. From ./dist, copy the css and fonts folder as peers into the app assets folder.
2. Include the css/materialdesignicons.css into the app css structure.
3. Accessing the icons in the reduced webfont is the same as with the full mdi font.

Notes

• The package is basically a clone of the original @mdi/font-build package. 2 files have been slightly adapted:
  • ./bin/index.js
  • ./src/scss/_path.scss
• In addition to ./dist, the build also creates an ./icon folder that contains the specified icon svg files. You can safely delete that folder after a successful build.

Credits

Full credits go to the creators and contributors of the @mdi/font-build package, released under the MIT license. My additions make it worse.