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
mdi-stylus
Set up compiler to use Use gulp, grunt, or similar and configure your stylus to include mdi-stylus
in the use
option.
For example, with gulp:
var mdiStylus = ; gulp;
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;
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 iconsimport-all-icons()
Test
npm install
gulp
Important notes
- The icon
null
has been renamed toicon-null
, to work around a parse error caused by stylus interpreting it as null.