@title Getting Started
@previewBell(){
  <svg style="width:24px;height:24px;">
    <path fill="#6F6F6F" d="M14 20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20L14 20ZM12 2C12.5523 2 13 2.44772 13 3L13 4.08298C15.8377 4.55905 18 7.02702 18 10L18 16L21 19L3 19L6 16L6 10C6 7.02698 8.1623 4.55902 11 4.08294L11 3C11 2.44772 11.4477 2 12 2Z"></path>
  </svg>
}
@previewOverlay(){
  <svg style="width:24px;height:24px;">
    <path fill="#000" d="M12 4C14.2091 4 16 5.79086 16 8C16 10.2091 14.2091 12 12 12C9.79086 12 8 10.2091 8 8C8 5.79086 9.79086 4 12 4ZM12 14C16.4183 14 20 15.7909 20 18L20 20L4 20L4 18C4 15.7909 7.58172 14 12 14Z"></path>
    <path fill="#D74933" d="M12 0C18.6274 0 24 5.37259 24 12C24 18.6274 18.6274 24 12 24C5.37258 24 0 18.6274 0 12C0 5.37259 5.37258 0 12 0ZM12 2C6.47715 2 2 6.47716 2 12C2 14.4013 2.84636 16.6049 4.25705 18.3287L18.3287 4.25706C16.6049 2.84637 14.4013 2 12 2ZM12 22C17.5228 22 22 17.5228 22 12C22 9.59873 21.1536 7.39514 19.7429 5.67127L5.67127 19.7429C7.39514 21.1536 9.59873 22 12 22Z"></path>
  </svg>
}
@download(text, url){
  <button class="btn" onclick="window.location = '@url'" style="vertical-align:top;background:transparent;border:0;color:#333;">
    <svg>
      <path fill="#2196F3" d="M 5,3L 19,3L 20.7359,6L 20.7304,6C 20.9018,6.29149 21,6.63428 21,7L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,7C 3,6.638 3.09618,6.29846 3.26437,6L 3.26135,6L 5,3 Z M 5.57294,4L 5,5L 5,5L 19,5L 18.4303,4L 5.57294,4 Z M 7,12L 12,17L 17,12L 14,12L 14,10L 10,10L 10,12L 7,12 Z "></path>
    </svg>
    @text
  </button>
}

# @title

There are many different ways you can consume the Material Design Icons in your projects or sites. Below are examples for various platforms.

## Web Font @download(Download the Web Font, https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip)

For those targetting the web your best option is to use the web font (bower `bower install mdi` or npm `npm install mdi`). Files should match the file structure below.

```text File Structure
fonts
  /materialdesignicons-webfont.eot
  /materialdesignicons-webfont.svg
  /materialdesignicons-webfont.ttf
  /materialdesignicons-webfont.woff
  /materialdesignicons-webfont.woff2
css
  /materialdesignicons.min.css            - Minified CSS
  /materialdesignicons.min.css.map        - Developer Tools Map
preview.html                              - Preview the font files
```

To reference the icons add the line below into the `head` tag.

```html Reference the CSS
<link href="css/materialdesignicons.min.css" media="all" rel="stylesheet" type="text/css" />
```

To use the icons inline use the syntax below. Preview these in the `preview.html` provided.

```html Web Font Example
<i class="mdi mdi-bell"></i>  <!-- bell -->
```

@previewBell()

## Inline SVG

The web font is not the only way to use the icons. They can also be included inline with the `svg` tag. Right click any icon on the site and click the 'View SVG' item in the context menu for example code.

```html SVG Inline Exmaple
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M ... Z" /> <!-- account -->
</svg>
```

SVGs like the web font can be overlayed and combined.

```html Overlay Example
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
    <path fill="#000000" d="M ... Z" /> <!-- account -->
    <path fill="#990000" d="M ... Z" /> <!-- block-helper -->
</svg>
```

@previewOverlay()

SVGs can also be styled with CSS similar to HTML elements and assigned classes.

```css Examples
svg.example:hover path {
    fill: #900;
    fill-opacity: 0.5;
}
```

## WPF / Windows / Windows Phone

Windows uses the vector XAML format. Right click any icon on the site and click the "View XAML" item in the context menu.

## Polymer @download(Download 'mdi.html', /api/download/polymer/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)

The `mdi.html` contains all the icons provided on the site. Use inline with the following code.

```html Polymer Example
<core-icon icon="mdi:account"></core-icon>
```

Learn more about custom icons in the [polymer documentation](https://www.polymer-project.org/docs/elements/icons.html#roll-your-own)

## Grunt `grunt-webfont`

Creating subsets of the font can be done with the [grunt-webfont](https://github.com/sapegin/grunt-webfont) package.

... explain step by step here...

## License

These fonts and designs are covered by the [license.txt](https://github.com/Templarian/MaterialDesign/blob/master/license.txt) located in the root of the git repo on GitHub.