MaterialDesignIcons-SCSS-Variables

This SCSS part file allows you to use MaterialDesignIcons project directly from your SCSS files: instead of using <i class="mdi mdi-refresh"></i>, you'll be able to style any element from SCSS:

How to use this

// Refresh icon
.icon-refresh {
    @include material-icon($mdi-refresh);
}

Note: since MaterialDesignIcons v1.7.12, .mdi does its magic on :before only (read more here). We echoed this change on @mixin material-icon($icon) and created @mixin material-icon-set($icon) to match the new .mdi-set selector.

Using bower

1. Add bower dependency

    bower install --save materialdesignicons-scss-variables
   

2. Reference SCSS part files using relative path

   /* style.scss */
   
   // Import materialdesignicons mixin & variables
   @import '../../../bower_components/materialdesignicons-scss-variables/dist/materialdesignicons';
   @import '../../../bower_components/materialdesignicons-scss-variables/dist/materialdesignicons-vars';
   

Manually

1. Copy dist/_materialdesignicons.scss & dist/_materialdesignicons-vars.scss into your project

2. Reference SCSS part files

   /* style.scss */
   
   // Import materialdesignicons mixin & variables
   @import 'materialdesignicons';
   @import 'materialdesignicons-vars';
   

Versions

Depending on the version of MaterialDesignIcons you're using, you'll want to pick one or another version of this library:

MaterialDesignIcons's version	SVSS-vars version
<= 1.6.50	1.0.3
1.7.12	2.1.0
1.7.22	2.2.0
2.3.99	2.3.0

How to update _materialdesignicons-vars.scss file

Note: you usually don't want to do that, except if some icons are missing from the generated file.

The generate.py script generates _materialdesignicons-vars.scss from MaterialDesignIcons input file:

$mdi-access-point: "\F002";
$mdi-access-point-network: "\F003";
$mdi-account: "\F004";
$mdi-account-alert: "\F005";
$mdi-account-box: "\F006";
$mdi-account-box-outline: "\F007";
$mdi-account-card-details: "\F5D2";
$mdi-account-check: "\F008";
...

1. Run python generate.py: _variables.scss will be downloaded and parsed from MaterialDesignIcon's repository to update _materialdesignicons-vars.scss.
2. Enjoy dist/_materialdesignicons-vars.scss!
3. Open in issue if bower's package is outdated