mdi-stylus

Material Design Icons port to stylus

allowing icons to be selectively chosen or included all at once.

Installation

npm install mdi-stylus --save

Initialization

Initial( if you need custom fonts)

You need to install font forge and set to environment variables or use the node engine option if it work for you

Run git submodule update to get latest material design svg files, you can add new svg icons as needed

Run grunt to compile template_styl_variables and new generated icons

Set up compiler to use mdi-stylus

Use gulp, grunt, or similar and configure your stylus to include mdi-stylus in the use option. For example, with gulp:

var mdiStylus = require("mdi-stylus");
 
gulp.task('main', function () {
  return gulp.src('./templates/stylus/main.styl')
    .pipe(stylus({
      use: [
        mdiStylus(),
      ],
      compress: false,
    }))
    .pipe(gulp.dest('./dist'))
    .pipe(livereload());
});

Then import mdi-stylus in your stylus file.

@import 'mdi-stylus'

Configuration

The variables used by mdi-stylus are set by the library only if not already set. That means to override them you must set them before importing mdi-stylus.

See variables.styl for full details.

Font path

The font path is set to ../fonts by default, but this may not be suitable for your project. For example, if the fonts will be available at paths like /fonts/materialdesignicons-webfont.woff, it can be overridden with stylus code like the following:

$mdi-font-path = '/fonts'
@import 'mdi-stylus'

The fonts can be moved to this location (usually public or dist) as part of your build process; for example with gulp you can do:

var filesToMove = [
  './node_modules/mdi/fonts/**/*.*',
];
 
gulp.task('move', ['clean'], function () {
  return gulp.src(filesToMove)
    .pipe(gulp.dest('./dist/fonts'));
});

As alternative example, if you want the fonts in a subdirectory and your server follows symlinks, you can do:

cd dist/fonts
ln -s ../../node_modules/mdi/fonts material-design-icons

And then configure $mdi-font-path = '/fonts/material-design-icons' in your stylus.

Usage

// Use individual icons
.{$mdi-css-prefix}-star
  mdi-icon 'star'
 
// Or import a list of icons in a loop
.{$mdi-css-prefix}
  for $icon in star account adjust
    &-{$icon}
      mdi-icon $icon
 
// Or import all icons
import-all-icons()

Test

npm install
gulp

Important notes

• The icon null has been renamed to icon-null, to work around a parse error caused by stylus interpreting it as null.