-}
-# @title
+This document has been moved over to the dev server as we write out the new documentation.
-@boostrapInfo() There are many different ways you can consume the Material Design Icons in your projects. The most common uses are listed below. Bootstrap has a separate guide that can be viewed [here](/bootstrap).
+[View the Dev Server's new Documentation](https://dev.materialdesignicons.com/getting-started)
-## Webfont @download(Download the Webfont, https://github.com/Templarian/MaterialDesign-Webfont/archive/master.zip)
-
-For those targeting the web your best option is to use the webfont (npm `npm install @mdi/font` or bower `bower 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
-
-```
-
-To use the icons inline you can use the syntax below.
-
-```html Webfont Example
-
-```
-
-@previewBell()
-
-From version 1.6.80+, the `mdi` class will no longer alter styles of the element it is applied to and will only alter the styles of the `:before` pseudo element where the icon is inserted. This means it is now possible to apply icons directly to elements without key styles such as `font-family` being overridden. As you no longer need to use an aditional element (such as `i`), your HTML can be more semantically correct.
-
-```html Semantic Icon Example
-Home
-```
-
-This change should not affect any existing icons other than rare cases where the `mdi` class is inherited by the icon element from a parent. If you are having issues please refer to the Iconsets webfont feature below which explains this in more detail and shows how it can be fixed. If this does not solve the problem feel free to open a new [issue](https://github.com/Templarian/MaterialDesign/issues) on github with the title 'Broken Icons After Update' outlining the code which no longer works.
-
-### Webfont features
-
-The webfont provides several additional helper classes which can be used to quickly display icons in a certain way.
-
-#### Font Size
-
-The classes `.mdi-18px`, `.mdi-24px`, `.mdi-36px`, and `.mdi-48px` can be added to easily change the size of the icon to the most optimal sizes.
-
-```html Size Example
-Home
-Home
-```
-
-#### Color
-Use either `.mdi-light` or `.mdi-dark` to set the color of the icon to the default material values. You can also add `.mdi-inactive` to an element with those classes to use the inactive color variant.
-
-```html Color Example
-Home
-Home
-Home
-Home
-```
-
-#### Flip
-Icons can be flipped horizontally and/or vertically using the classes `.mdi-flip-h` and `.mdi-flip-v`.
-
-```html Flip Example
-Home
-Home
-```
-
-#### Rotate
-Icons can be rotated by 45 degree increments using the syntax `.mdi-rotate-[angle]` where angle is one of the following values: 45, 90, 135, 180, 225, 270, or 315.
-
-```html Rotate Example
-Home
-Home
-```
-
-#### Iconsets (v1.6.80+)
-As of version 1.6.80+, the `mdi` class can no longer be applied once to a parent element so that all child elements inherit the `mdi` styles needed to render icons (set the font to use the mdi iconfont etc). To remedy this, we have added a new class `.mdi-set`. This simply allows you to do something like the following example without specifying the `mdi` class on every icon.
-
-```html Iconset Example
-
-
-
-
-
-
-
-```
-
-## Inline SVG
-
-The webfont 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 Example
-
-```
-
-SVGs like the webfont can be overlayed and combined.
-
-```html Overlay Example
-
-```
-
-@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;
-}
-```
-
-## SASS
-
-Use the characters in custom SASS use the method below.
-
-```
-@function mdi($name) {
- @return char(nth($hexes, index($names, $name)));
-}
-.custom:before {
- font: normal normal normal 24px/1 "Material Design Icons";
- content: mdi('account');
-}
-```
-
-## JavaScript / TypeScript
-
-Please use the `@mdi/js` package to include ES6 importing and tree shaking of only the icons you make use of. A simple example with
-JS is below.
-
-```js
-import { mdiAccount } from '@mdi/js'
-
-function Icon(props) {
- return (
-
- )
-}
-
-function App(props) {
- return (
-
- )
-}
-```
-
-## ReactJS
-
-For [ReactJS](https://reactjs.org) use the `@mdi/react` library. Learn more: [MaterialDesign-React](https://github.com/Templarian/MaterialDesign-React).
-
-## React with Material-UI
-
-If you use React with the [Material-UI](http://www.material-ui.com/) component library, you can use a [third-party package](https://github.com/TeamWertarbyte/mdi-material-ui) that provides `SvgIcon` wrappers for every icon.
-
-## Android (Vector Drawable)
-
-Android uses the Vector Drawable format that is similar to SVG. Right click any icon to download or view the vector drawable syntax.
-
-## 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.
-
-## Angular 2.x/4.x @download(Download for Angular Material 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
-
-The `mdi.svg` contains all the icons provided on the site. Use inline with [MatIconRegistry](https://material.angular.io/components/icon/api).
-The following assumes that you're using the latest version of `@angular/material` (`2.0.0-beta.12`) and you already have the basic knowledge of Angular Material.
-Place the SVG file under your `assets` folder. Please ensure that this file is publicly accessible.
-In your app's module file (typically `app.module.ts`), import `MatIconModule` and `MatIconRegistry` from `@angular/material`:
-
-```typescript App module
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgModule } from '@angular/core';
-import { MatIconRegistry, MatIconModule } from '@angular/material';
-import { DomSanitizer } from '@angular/platform-browser';
-import { HttpModule } from '@angular/http';
-/*
-From the latest master, HttpClientModule is required instead
-import { HttpClientModule } from '@angular/common/http';
-*/
-
-...
-@NgModule({
- imports: [
- BrowserModule,
- BrowserAnimationsModule,
- HttpModule,
- // From the latest master, HttpClientModule is required instead
- // Your other modules
- // Take note that you have to import MatIconModule into your app
- MatIconModule
- ]
-})
-export class AppModule {
- constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
- matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')); // Or whatever path you placed mdi.svg at
- }
-}
-```
-
-If you're using Angular CLI, make sure to include `assets` folder under `.angular-cli.json` in `assets` array (Although by default, the angular CLI will autofill it in):
-
-```json Angular CLI file
-{
- "apps": [
- {
- "assets": [
- "assets"
- ]
- }
- ]
-}
-```
-Usage:
-
-```html Example Usage
-
-
-
-
-
-
-```
-
-Please also add the following class to your styles (`styles.css`) to solve the problem where an icon isn't aligned properly when used in a menu item:
-
-```css styles.css
-button.mat-menu-item {
- line-height: 24px !important;
-}
-a.mat-menu-item > mat-icon {
- margin-bottom: 14px;
-}
-.mat-icon svg {
- height: 24px;
- width: 24px;
-}
-```
-
-[Demo](https://stackblitz.com/edit/mdi-material-example)
-
-For more information on icons, refer to the [icon docs](https://material.angular.io/components/icon/overview).
-
-## Angular JS @download(Download for AngularJS Material 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B)
-
-The `mdi.svg` contains all the icons provided on the site. Use inline with [$mdIconProvider](https://material.angularjs.org/latest/api/service/$mdIconProvider).
-
-```javascript Configuration
-var app = angular.module('myApp', ['ngMaterial']);
-app.config(function($mdIconProvider) {
- $mdIconProvider
- .defaultIconSet('my/app/mdi.svg')
-});
-```
-
-Usage:
-
-```html Example Usage
-
-
-
-
-```
-
-## Polymer @download(Download for Polymer v0.5 'mdi.html', /api/download/polymer/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B) @download(Download for Polymer v1.0 'mdi.html', /api/download/polymer/v1/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
-
-```
-
-Learn more about custom icons in the [polymer documentation for v0.5](https://www.polymer-project.org/docs/elements/icons.html#roll-your-own) and for Polymer v1.0 [iron-iconset-svg](https://elements.polymer-project.org/elements/iron-iconset-svg).
-
-## Vue
-
-If you are using [Vue.js](https://vuejs.org/), you can find a collection of the SVG icons as single file components packaged as [vue-material-design-icons](https://www.npmjs.com/package/vue-material-design-icons).
-
-## PHP / Twig
-
-You can use the `mesavolt/mdi-php` composer package to easily use MDI in your native PHP views:
-
-```php
-
-
-
-```
-
-Twig integration is easy too:
-
-```twig
-
-```
-
-Learn more: [MaterialDesignIcons-PHP](https://github.com/chteuchteu/MaterialDesignIcons-PHP)
-
-## Ember
-
-If you use [Ember.js](https://www.emberjs.com/), you can try to install the addon [ember-mdi](https://github.com/kaermorchen/ember-mdi) ([demo](https://kaermorchen.github.io/ember-mdi/)), which have only SVG icons and based on [mdi-svg](https://github.com/Templarian/MaterialDesign-SVG).
-
-## Cordova
-
-Due to a "bug" in Cordova you will need to manually edit the css file to remove the version query string. [Read More](https://github.com/Templarian/MaterialDesign/issues/760).
-
-## Symbols for Adobe Illustrator
-
-[Download Symbols for Adobe Illustrator](https://github.com/danielhickman/MaterialDesign/tree/master/Symbols/Templarian) by Daniel Hickman. This GitHub repo also includes the steps to keep the symbol library updated with the latest.
-
-## Visual Studio
-
-Please use the [Glyphfriend](https://visualstudiogallery.msdn.microsoft.com/5fd24afb-b3b2-4cec-9b03-1cfcec6123aa) extension to quickly autocomplete icons.
-
-## ATOM
-
-The [tool-bar](https://atom.io/packages/tool-bar) package supports this icon set.
-
-## 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](https://github.com/Templarian/MaterialDesign/blob/master/LICENSE) located in the root of the git repo on GitHub.
+> The docs that were previously here can still be viewed, but were becoming a mess to maintain.