Download specific icons as webfont

[stubbies]

I don't see the option to make a custom download.

The number of the icons keeps growing so I think it would be nice to be able to select which icons we want to download as webfont.

[Templarian]

This is coded in the backend. I just don't have a UI built out exposing the functionality.

There are a few issues to resolve before development is started. For now using the whole icon set [small if the browser supports woff2] should be fine.

[w3l]

+1

Got the font-files down to 2-4 KB after editing the font in FontForge. But it was a pain in the ass, would love to see it on the site!

[Templarian]

@w3l Google is working to optimize their woff2 conversion software. It's a bug in that currently, that does not exist in the FontForge implementation. Once it is fixed I'll use the most up to date.

Right now the entire font build process is ran in node. The 2-4kb savings was nice, but I want to keep the build chain as simple as possible since it takes 25 seconds to build the download package at the moment from the database from scratch.

Subselection is still in the works. For now you can use FontIcons.com which has support for v1.1.34.

[w3l]

Well, the savings was 58KB-1194KB depending on font-type, the fonts was 2-4KB big after removing unused icons... (If that was unclear ;-)) But thanks for the suggestion, didn't know fonticons.com had support for Material Design Icons... Gonna check it out...

[ghost]

@Templarian is there a place where we can see your Gruntfile for building?

[Templarian]

@dougamos It's mainly just the stock grunt-webfont.

module.exports = function(grunt) {

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    webfont: {
      everything: {
        src: ['icons/access-point.svg', 'icons/access-point-network.svg', 'etc...'],
        dest: 'build',
        options: {
            engine: 'node',
            types: 'eot,woff2,woff,ttf,svg',
            font: 'Material Design Icons',
            hashes: false,
            template: 'template.css',
            autoHint: false,
            normalize: true
        }
      }
    },
    sass: {
      expanded: {
        options: {                       // Target options
          style: 'expanded'
        },
        files: {
          'build/materialdesignicons.css': 'build/materialdesignicons.scss'
        }
      },
      compressed: {
        options: {                       // Target options
          style: 'compressed'
        },
        files: {
          'build/materialdesignicons.min.css': 'build/materialdesignicons.scss'
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-webfont');
  grunt.loadNpmTasks('grunt-contrib-sass');

  grunt.registerTask('build.font', ['webfont', 'sass']);

};

[ghost]

@Templarian thanks for this, I've changed my Gruntfile to closer match yours but icons are having issues converting:

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    webfont: {
      everything: {
        src: '... MaterialDesign/icons/svg/*.svg',
        dest: 'fonts',
        destCss: 'css',
        options: {
          templateOptions: {
            baseClass: 'icon',
            classPrefix: 'icon-',
          },
          htmlDemoFilename: 'preview',
          destHtml: '.',
          engine: 'node',
          types: 'eot,woff2,woff,ttf,svg',
          autoHint: false,
          normalize: true,
          hashes: false,
        },
      }
    }
  });

Output (ttf file) is as follows:

OS: Mac OS X 10.11.1 (also tried ubuntu 14.04) node: v5.3.0 grunt: v0.4.5 grunt-webfont 1.1.0

[Templarian]

I build mine in a node/linux environment on my CentOS server. You can't use the SVG files in the repo they won't work (there is a warning about that). Eventually I need to add an option to create custom fonts (very CPU intensive), or allow a mass download.

https://materialdesignicons.com/ Right click any icon and select the "SVG Webfont" option. This is due to limitations in the SVG to Font conversion. I've written a ton of code to make sure the path data always works and is minimum as possible.

To make things easy I've zipped v1.4.57 here for download.

(edit: didn't mean to close this, miss-clicked)