@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
    src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(MaterialIcons-Regular.woff2) format('woff2'),
    url(MaterialIcons-Regular.woff) format('woff'),
    url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 0;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-8 {
    font-size: 8px;
}

.material-icons.md-10 {
    font-size: 10px;
}

.material-icons.md-12 {
    font-size: 12px;
}

.material-icons.md-14 {
    font-size: 14px;
}

.material-icons.md-16 {
    font-size: 16px;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-20 {
    font-size: 20px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-28 {
    font-size: 28px;
}

.material-icons.md-36 {
    font-size: 36px;
}

.material-icons.md-48 {
    font-size: 48px;
}

/* Rules for using icons as black on a light background. */
.material-icons.md-dark {
    color: rgba(0, 0, 0, 0.54);
}

.material-icons.md-dark.md-inactive {
    color: rgba(0, 0, 0, 0.26);
}

/* Rules for using icons as white on a dark background. */
.material-icons.md-light {
    color: rgba(255, 255, 255, 1);
}

.material-icons.md-light.md-inactive {
    color: rgba(255, 255, 255, 0.3);
}



.material-icons.black { color: #000000; }
.material-icons.white { color: #FFFFFF; }
.material-icons.teal500 { color: #009688; }
.material-icons.cyan500 { color: #00BCD4; }
.material-icons.lime500 { color: #CDDC39; }
.material-icons.lBlue500 { color: #03A9F4; }
.material-icons.brown500 { color: #795548; }

.material-icons.green300 { color: #81C784; }
.material-icons.green500 { color: #4CAF50; }
.material-icons.green600 { color: #43A047; }
.material-icons.green700 { color: #388E3C; }
.material-icons.green900 { color: #1B5E20; }

.material-icons.red300 { color: #E57373; }
.material-icons.red500 { color: #F44336; }
.material-icons.red600 { color: #E53935; }
.material-icons.red700 { color: #D32F2F; }
.material-icons.red900 { color: #B71C1C; }

.material-icons.maroon800 { color: #C62828; }
.material-icons.maroon900 { color: #700101; }

.material-icons.orange300 { color: #FFB74D; }
.material-icons.orange500 { color: #FF9800; }
.material-icons.orange600 { color: #FB8C00; }
.material-icons.orange700 { color: #F57C00; }
.material-icons.orange900 { color: #E65100; }

.material-icons.amber800 { color: #FF8F00; }
.material-icons.amber700 { color: #FFA000; }
.material-icons.amber500 { color: #FFC107; }
.material-icons.amberA200 { color: #FFD740; }

.material-icons.blue300 { color: #64B5F6; }
.material-icons.blue500 { color: #2196F3; }
.material-icons.blue600 { color: #1E88E5; }
.material-icons.blue700 { color: #1976D2; }
.material-icons.blue900 { color: #0D47A1; }

.material-icons.maIndigo900 { color: #040D52; }
.material-icons.maIndigo800 { color: #283593; }
.material-icons.maIndigo500 { color: #3F51B5; }
.material-icons.maIndigoA100 { color: #8C9EFF; }

.material-icons.deepPurple800 { color: #4527A0; }
.material-icons.pink300 { color: #F06292; }
.material-icons.indigo900 { color: #1A237E; }

.material-icons.yellow300 { color: #FFF176; }
.material-icons.yellow500 { color: #FFEB3B; }
.material-icons.yellow600 { color: #FDD835; }
.material-icons.yellow700 { color: #FBC02D; }
.material-icons.yellow900 { color: #F57F17; }

.material-icons.gray300 { color: #E0E0E0; }
.material-icons.gray500 { color: #9E9E9E; }
.material-icons.gray600 { color: #757575; }
.material-icons.gray700 { color: #616161; }
.material-icons.gray900 { color: #212121; }


.material-icons.blueGray300 { color: #90A4AE; }
.material-icons.blueGray500 { color: #607D8B; }
.material-icons.blueGray600 { color: #546E7A; }
.material-icons.blueGray700 { color: #455A64; }
.material-icons.blueGray900 { color: #263238; }