1 $material-icon-font-path: '~material-design-icons/iconfont/';

     2 

     3 @font-face {

     4   font-family: 'Material Icons';

     5   font-style: normal;

     6   font-weight: 400;

     7   src: url('#{$material-icon-font-path}MaterialIcons-Regular.eot'); /* For IE6-8 */

     8   src: local('Material Icons'),

     9     local('MaterialIcons-Regular'),

    10     url('#{$material-icon-font-path}MaterialIcons-Regular.woff2') format('woff2'),

    11     url('#{$material-icon-font-path}MaterialIcons-Regular.woff') format('woff'),

    12     url('#{$material-icon-font-path}MaterialIcons-Regular.ttf') format('truetype');

    13 };

    14 

    15 .material-icons {

    16   font-family: 'Material Icons';

    17   font-weight: normal;

    18   font-style: normal;

    19   font-size: 24px;  /* Preferred icon size */

    20   display: inline-block;

    21   line-height: 1;

    22   text-transform: none;

    23   letter-spacing: normal;

    24   word-wrap: normal;

    25   white-space: nowrap;

    26   direction: ltr;

    27 

    28   /* Support for all WebKit browsers. */

    29   -webkit-font-smoothing: antialiased;

    30   /* Support for Safari and Chrome. */

    31   text-rendering: optimizeLegibility;

    32 

    33   /* Support for Firefox. */

    34   -moz-osx-font-smoothing: grayscale;

    35 

    36   /* Support for IE. */

    37   font-feature-settings: 'liga';

    38 }

    39 

    40 .material-icons {

    41     &.md-18 { font-size: 18px; }

    42     &.md-24 { font-size: 24px; }

    43     &.md-36 { font-size: 36px; }

    44     &.md-48 { font-size: 48px; }

    45 }