diff --git a/README.md b/README.md index 9be32b027..607ffad1f 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ bower install mdi [![Icons](http://i.imgur.com/zKuXEkR.png)](https://materialdesignicons.com/) -**Note:** _SVG icons are not compressed in GitHub. Please use the icons from [Material Design Icons - Design](http://materialdesignicons.com/design) if you need inline SVG._ or [Templarian/MaterialDesign-SVG](https://github.com/templarian/materialdesign-svg) +**Note:** _SVG icons are not compressed in GitHub. Please use the icons from [Material Design Icons - Design](http://materialdesignicons.com/design) or [Templarian/MaterialDesign-SVG](https://github.com/templarian/materialdesign-svg) if you need inline SVG._ **Warning (Cordova only):** _You will need to manually edit the css file to remove the version query string. [Read More](https://github.com/Templarian/MaterialDesign/issues/760)._ diff --git a/site/getting-started.savvy b/site/getting-started.savvy index d4d5e4335..cb9e32228 100644 --- a/site/getting-started.savvy +++ b/site/getting-started.savvy @@ -94,11 +94,11 @@ Use either `.mdi-light` or `.mdi-dark` to set the color of the icon to the defau ``` #### Flip -Icons can be flipped horizontally and/or vertically using the classes `.mdi-flip-horizontal` and `.mdi-flip-vertical`. +Icons can be flipped horizontally and/or vertically using the classes `.mdi-flip-h` and `.mdi-flip-v`. ```html Flip Example -Home -Home +Home +Home ``` #### Rotate @@ -174,30 +174,41 @@ Android uses the Vector Drawable format that is similar to SVG. Right click any 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 v2 'mdi.svg', /api/download/angularmaterial/38EF63D0-4744-11E4-B3CF-842B2B6CFE1B) +## 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 [MdIconRegistry](https://material.angular.io/components/icon/api). +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`), add the following lines: +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 { MdIconRegistry, MdIconModule } from '@angular/material'; +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, - // Your other modules - // Take note that you have to import MdIconModule into your app - MdIconModule - ] -]) +@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(mdIconRegistry: MdIconRegistry, domSanitizer: DomSanitizer){ - mdIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./src/assets/mdi.svg')); // Or whatever path you placed mdi.svg at - } + constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){ + matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')); // Or whatever path you placed mdi.svg at + } } ``` @@ -205,33 +216,49 @@ If you're using Angular CLI, make sure to include `assets` folder under `.angula ```json Angular CLI file { - "apps": [ - { - ... - "assets": [ - "assets" - ] - } - ] + "apps": [ + { + "assets": [ + "assets" + ] + } + ] } ``` Usage: ```html Example Usage - - - ``` -[Demo](http://plnkr.co/edit/Qtn1XeKPUdQtY5hntFIF?p=preview) +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: -For more information on icons, refer [here](https://material.angular.io/components/icon/overview). +```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) @@ -250,7 +277,7 @@ Usage: ```html Example Usage - + ```