Get Started

Easy ways to get MDL2 Icons onto your website

Want to manage and host MDL2 Icons assets yourself? You can download, customize, and use the icons and default styling manually. Both CSS and CSS Preprocessor (Sass) formats are included.

Using CSS

  1. Copy the entire mdl2-icons directory into your project.
  2. In the <head> of your html, reference the location to your mdl2-icons.min.css.
    <link rel="stylesheet" href="path/to/mdl2-icons/css/mdl2-icons.min.css">

Using Sass

Use this method to customize Font Awesome 1.0.0 using SASS.

  1. Copy the mdl2-icons directory into your project.
  2. Open your project's mdl2-icons/scss/_variables.scss and edit the $mdl2-font-path variable to point to your font directory.
    $mdl2-font-path:   "../font";

    The font path is relative from your compiled CSS directory.

  3. Re-compile your SASS if using a static compiler. Otherwise, you should be good to go.

MDL2 Icons are built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.

For more information, please see Browser and device support by the Bootstrap Team.