MaterialDesignIcons as SCSS variables
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
upstream_parser @ e6fae4f


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';


  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';


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 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 _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