From bd34b55897ab28b733fba95a1dcfb36fb681327d Mon Sep 17 00:00:00 2001 From: pterrien Date: Sat, 7 Oct 2017 11:53:27 +0200 Subject: [PATCH 1/5] correction on flip-* classes According to the .scss, the correct classes are `.mdi-flip-h` and `.mdi-flip-v`, not `.mdi-flip-horizontal` and `.mdi-flip-vertical`: ``` .#{$mdi-css-prefix}-flip-h:before { -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; } .#{$mdi-css-prefix}-flip-v:before { -webkit-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; -ms-filter: "FlipV"; } ``` --- site/getting-started.savvy | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/site/getting-started.savvy b/site/getting-started.savvy index d4d5e4335..34fe94697 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 From 60b9c11f0eac2329112e21d279f62813507d2368 Mon Sep 17 00:00:00 2001 From: Peter Noble Date: Tue, 10 Oct 2017 15:05:49 +0100 Subject: [PATCH 2/5] Fixed wording of note --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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)._ From afb7326ef8f24ddd160f152ef0555f8efc5cd201 Mon Sep 17 00:00:00 2001 From: Edric Chan Date: Tue, 24 Oct 2017 15:52:41 +0800 Subject: [PATCH 3/5] Change material2 section to new version - Add HTML comments to example usage - Update section to new version (`2.0.0-beta.12`) - Change demo to use Stackblitz - Rephrase some words, change grammar - Add missing module imports --- site/getting-started.savvy | 38 +++++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 15 deletions(-) diff --git a/site/getting-started.savvy b/site/getting-started.savvy index 34fe94697..207199ae1 100644 --- a/site/getting-started.savvy +++ b/site/getting-started.savvy @@ -174,29 +174,35 @@ 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'; + ... @NgModule([ imports: [ BrowserModule, BrowserAnimationsModule, + HttpModule, // Your other modules - // Take note that you have to import MdIconModule into your app - MdIconModule + // 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 } } ``` @@ -218,20 +224,22 @@ If you're using Angular CLI, make sure to include `assets` folder under `.angula Usage: ```html Example Usage - - - ``` -[Demo](http://plnkr.co/edit/Qtn1XeKPUdQtY5hntFIF?p=preview) +[Demo](https://stackblitz.com/edit/mdi-material-example) -For more information on icons, refer [here](https://material.angular.io/components/icon/overview). +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) From 4771773231c3dd45a47414945754085651a35e43 Mon Sep 17 00:00:00 2001 From: Edric Chan Date: Sun, 29 Oct 2017 21:53:38 +0800 Subject: [PATCH 4/5] Add fix on misaligned menu items - Change indent to two spaces - Add note to import `HttpClientModule` if using latest version of `master` --- site/getting-started.savvy | 65 +++++++++++++++++++++++--------------- 1 file changed, 40 insertions(+), 25 deletions(-) diff --git a/site/getting-started.savvy b/site/getting-started.savvy index 207199ae1..cd7432ff2 100644 --- a/site/getting-started.savvy +++ b/site/getting-started.savvy @@ -188,22 +188,27 @@ 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, - // Your other modules - // Take note that you have to import MatIconModule into your app - MatIconModule - ] -]) +@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 - } + constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){ + matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')); // Or whatever path you placed mdi.svg at + } } ``` @@ -211,14 +216,13 @@ 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: @@ -228,15 +232,26 @@ 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; +} +``` + [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). @@ -258,7 +273,7 @@ Usage: ```html Example Usage - + ``` From 710bf66653942d39e38eda7f1b3a2329482ddac5 Mon Sep 17 00:00:00 2001 From: Edric Chan Date: Mon, 30 Oct 2017 22:08:35 +0800 Subject: [PATCH 5/5] Add fix where icon does not displaying properly --- site/getting-started.savvy | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/site/getting-started.savvy b/site/getting-started.savvy index cd7432ff2..cb9e32228 100644 --- a/site/getting-started.savvy +++ b/site/getting-started.savvy @@ -250,6 +250,10 @@ button.mat-menu-item { a.mat-menu-item > mat-icon { margin-bottom: 14px; } +.mat-icon svg { + height: 24px; + width: 24px; +} ``` [Demo](https://stackblitz.com/edit/mdi-material-example)