material-icons-font/README.md

Material icons font

# material-icons-font
Material design icons font

## Description
Based on Material design icons font to simplify process of building new Angular typescript application to serve icons font definition from vendor package (e.g. npm node_modules), without the need to insert direct link to online google fonts in html head section manually.

## Installation

Load directly from GIT e.g. via bower

or

npm install material-icons-font --save

Version 1.x is based on https://github.com/google/material-design-icons

Version 2.x is based on community update at https://github.com/jossef/material-design-icons-iconfont

## Usage

### Direct css usage

Insert css into your build setup directly.

E.g. into Angular CLI main configuration styles

```
...
"styles": [
        "../node_modules/material-icons-font/material-icons-font.css"
    ],
...
```

### Import SCSS into your own SCSS files

Angular CLI with scss styles extension example:

```
@import '~material-icons-font/sass/variables'; // mandatory and at first place
@import '~material-icons-font/sass/mixins'; // mandatory and after variables
// there you can change default variables if they are not good enough for you
$MaterialIcons_FontPath: "~material-icons-font/fonts"; // for CLI project we change font path to point into package fonts folder
@import '~material-icons-font/sass/main'; // mandatory main material font definition
@import '~material-icons-font/sass/Regular'; // mandatory @font-face definition

// @import '~material-icons-font/sass/sizing'; // optional rules for icons sizing recommended by font designers
// @import '~material-icons-font/sass/coloring'; // optional rules for icons color rules with light and dark background and inactive state

```

### At last, just use it in your app

directly

```
<i class="material-icons">face</i>
<i class="material-icons md-48">face</i>
<i class="material-icons md-dark">face</i>
<i class="material-icons md-48 md-dark md-inactive">face</i>
<i class="material-icons md-light md-inactive">face</i>
```

with Angular Material

```
<mat-icon>add_alarm</mat-icon>
<mat-icon>adjust</mat-icon>
```

or else...