chore: use md-icon instead of <i> in demos. (#345)

Author: dozingcat

src/components/button/README.md

@@ -27,23 +27,23 @@ There are five types of buttons:
     * Defaults background to "accent" palette defined in theme
     * Box shadow applied
     * 40 by 40 px
- 
+
 Each is an attribute directive that you can add to a `button` or `a` tag.  You can provide custom content to the button by inserting it
 between the tags, as you would with a normal button.
- 
+
 Example:
- 
+
  ```html
 <button md-button>FLAT</button>
 <button md-raised-button>RAISED</button>
 <button md-icon-button>
-    <i class="material-icons md-24">favorite</i>
+    <md-icon class="md-24">favorite</md-icon>
 </button>
 <button md-fab>
-    <i class="material-icons md-24">add</i>
+    <md-icon class="md-24">add</md-icon>
 </button>
 <button md-mini-fab>
-    <i class="material-icons md-24">add</i>
+    <md-icon class="md-24">add</md-icon>
 </button>
  ```
 
@@ -53,13 +53,13 @@ Output:
 
 ### Theming
 
-All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute. 
+All button types can be themed to match your "primary" palette, your "accent" palette, or your "warn" palette using the `color` attribute.
 Simply pass in the palette name.
 
-In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background. 
+In flat buttons, the palette chosen will affect the text color, while in other buttons, it affects the background.
 
 Example:
- 
+
  ```html
 <button md-raised-button color="primary">PRIMARY</button>
 <button md-raised-button color="accent">ACCENT</button>
@@ -90,8 +90,8 @@ Output:
  * In high contrast mode, a strong border is added to the button to make it easier to see.
  * Button focus events originating from the keyboard will retain focus styles, while button focus events from the mouse will not.
  * As `md-button` is added to an existing `button` or `a` tag, it enjoys all the accessibility natively built into these elements.
- 
- 
+
+
 ### Upcoming work
 
 We will also be adding ink ripples to buttons in an upcoming milestone.

src/components/button/_button-base.scss

@@ -107,7 +107,7 @@ $md-mini-fab-padding: 8px !default;
   height: $size;
   padding: 0;
 
-  i {
+  i, md-icon {
     padding: $padding 0;
   }
 

src/components/icon/icon.scss

@@ -13,7 +13,5 @@ md-icon {
   display: inline-block;
   fill: currentColor;
   height: $md-icon-size;
-  margin: auto;
-  vertical-align: middle;
   width: $md-icon-size;
 }

src/components/list/README.md

@@ -32,8 +32,8 @@ Output:
 
 ### Multi-line lists
 
-If your list requires multiple lines per list item, annotate each line with an `md-line` attribute. 
-You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`), 
+If your list requires multiple lines per list item, annotate each line with an `md-line` attribute.
+You can use whichever heading tag is appropriate for your DOM hierarchy (doesn't have to be `h3`),
 as long as the `md-line` attribute is included.
 
 ```html
@@ -62,13 +62,13 @@ Two line list output:
 
 <img src="https://material.angularjs.org/material2_assets/list/two-line-list.png">
 
-Three line list output: 
+Three line list output:
 
 <img src="https://material.angularjs.org/material2_assets/list/three-line-list.png">
 
 ### Lists with avatars
 
-To include an avatar, add an image tag with an `md-list-avatar` attribute. 
+To include an avatar, add an image tag with an `md-list-avatar` attribute.
 
 ```html
 <md-list>
@@ -86,11 +86,11 @@ To include an avatar, add an image tag with an `md-list-avatar` attribute.
 Output:
 
 <img src="https://material.angularjs.org/material2_assets/list/list-with-avatar-2.png">
-    
+
 ### Dense lists
-Lists are also available in "dense layout" mode, which shrinks the font size and height of the list 
-to suit UIs that may need to display more information.  To enable this mode, add a `dense` attribute 
-to the main `md-list` tag.  
+Lists are also available in "dense layout" mode, which shrinks the font size and height of the list
+to suit UIs that may need to display more information.  To enable this mode, add a `dense` attribute
+to the main `md-list` tag.
 
 
 ```html
@@ -114,17 +114,17 @@ use `<md-divider>` tags.
 <md-list>
    <h3 md-subheader>Folders</h3>
    <md-list-item *ngFor="#folder of folders">
-      <i md-list-avatar class="material-icons">folder</i>
+      <md-icon md-list-avatar>folder</md-icon>
       <h4 md-line>{{folder.name}}</h4>
       <p md-line class="demo-2"> {{folder.updated}} </p>
    </md-list-item>
    <md-divider></md-divider>
    <h3 md-subheader>Notes</h3>
    <md-list-item *ngFor="#note of notes">
-      <i md-list-avatar class="material-icons">note</i>
+      <md-icon md-list-avatar>note</md-icon>
       <h4 md-line>{{note.name}}</h4>
       <p md-line class="demo-2"> {{note.updated}} </p>
-   </md-list-item>   
+   </md-list-item>
 </md-list>
 ```
 
@@ -151,13 +151,13 @@ If you require a more complex nav list (e.g. with more than one target per item)
   <md-list-item *ngFor="#link of links">
      <a md-line href="...">{{ link }}</a>
      <button md-icon-button (click)="showInfo(link)">
-        <i class="material-icons">info</i>
+        <md-icon>info</md-icon>
      </button>
   </md-list-item>
 </md-nav-list>
 ```
 
 ### Lists with secondary text
-Secondary text styling will be part of a broader typography module to 
-[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component 
+Secondary text styling will be part of a broader typography module to
+[come later](https://github.com/angular/material2/issues/205), and won’t be implemented as part of this component
 specifically. Gray text in the examples above comes from a "demo-2" class added manually by the demo.

src/demo-app/button/button-demo.html

@@ -3,21 +3,21 @@
     <button md-button>flat</button>
     <button md-raised-button>raised</button>
     <button md-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </button>
     <button md-mini-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </button>
   </section>
 
   <section>
     <a href="http://www.google.com" md-button color="primary">link</a>
     <a href="http://www.google.com" md-raised-button>link</a>
     <a href="http://www.google.com" md-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </a>
     <a href="http://www.google.com" md-mini-fab>
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </a>
   </section>
 
@@ -35,27 +35,27 @@
 
   <section>
     <button md-fab color="primary">
-      <i class="material-icons md-24">home</i>
+      <md-icon class="md-24">home</md-icon>
     </button>
     <button md-fab color="accent">
-      <i class="material-icons md-24">favorite</i>
+      <md-icon class="md-24">favorite</md-icon>
     </button>
     <button md-fab color="warn">
-      <i class="material-icons md-24">feedback</i>
+      <md-icon class="md-24">feedback</md-icon>
     </button>
   </section>
 
   <section>
     <button md-icon-button color="primary">
-      <i class="material-icons md-24">menu</i>
+      <md-icon class="md-24">menu</md-icon>
     </button>
 
     <button md-icon-button color="accent">
-      <i class="material-icons md-24">favorite</i>
+      <md-icon class="md-24">favorite</md-icon>
     </button>
 
     <button md-icon-button>
-      <i class="material-icons md-24">more_vert</i>
+      <md-icon class="md-24">more_vert</md-icon>
     </button>
   </section>
 
@@ -69,11 +69,11 @@
     <a href="http://www.google.com" md-button color="accent" [disabled]="isDisabled">off</a>
     <button md-raised-button color="primary" [disabled]="isDisabled">off</button>
     <button md-mini-fab [disabled]="isDisabled">
-      <i class="material-icons md-24">check</i>
+      <md-icon class="md-24">check</md-icon>
     </button>
 
     <button md-icon-button color="accent" [disabled]="isDisabled">
-      <i class="material-icons md-24">favorite</i>
+      <md-icon class="md-24">favorite</md-icon>
     </button>
   </section>
   <section>

src/demo-app/button/button-demo.ts

@@ -1,11 +1,12 @@
 import {Component} from 'angular2/core';
 import {MdButton, MdAnchor} from '../../components/button/button';
+import {MdIcon} from '../../components/icon/icon';
 
 @Component({
     selector: 'button-demo',
     templateUrl: 'demo-app/button/button-demo.html',
     styleUrls: ['demo-app/button/button-demo.css'],
-    directives: [MdButton, MdAnchor]
+    directives: [MdButton, MdAnchor, MdIcon]
 })
 export class ButtonDemo {
   isDisabled: boolean = false;

src/demo-app/input/input-demo.html

@@ -85,10 +85,10 @@
     <p>
       <md-input>
         <md-placeholder>
-          I <i class="material-icons demo-icons">favorite</i> <b>bold</b> placeholder
+          I <md-icon class="demo-icons">favorite</md-icon> <b>bold</b> placeholder
         </md-placeholder>
         <md-hint>
-          I also <i class="material-icons demo-icons">home</i> <i>italic</i> hint labels
+          I also <md-icon class="demo-icons">home</md-icon> <i>italic</i> hint labels
         </md-hint>
       </md-input>
     </p>
@@ -122,7 +122,7 @@
       <br/>
       Both:
       <md-input #email placeholder="Email Address" value="angular-core" align="end">
-        <span md-prefix><i [class.primary]="email.focused" class="material-icons demo-icons demo-transform">email</i>&nbsp;</span>
+        <span md-prefix><md-icon [class.primary]="email.focused" class="demo-icons demo-transform">email</md-icon>&nbsp;</span>
         <span md-suffix class="demo-transform" [class.primary]="email.focused">&nbsp;@gmail.com</span>
       </md-input>
     </p>

src/demo-app/input/input-demo.scss

@@ -13,7 +13,9 @@
 
 .demo-icons {
   font-size: 100%;
+  height: inherit;
   vertical-align: top;
+  width: inherit;
 }
 
 .demo-transform {

src/demo-app/input/input-demo.ts

@@ -3,6 +3,7 @@ import {MD_INPUT_DIRECTIVES} from '../../components/input/input';
 import {MdButton} from '../../components/button/button';
 import {MdCard} from '../../components/card/card';
 import {MdCheckbox} from '../../components/checkbox/checkbox';
+import {MdIcon} from '../../components/icon/icon';
 import {MdToolbar} from '../../components/toolbar/toolbar';
 
 
@@ -12,7 +13,7 @@ let max = 5;
   selector: 'input-demo',
   templateUrl: 'demo-app/input/input-demo.html',
   styleUrls: ['demo-app/input/input-demo.css'],
-  directives: [MdCard, MdCheckbox, MdButton, MdToolbar, MD_INPUT_DIRECTIVES]
+  directives: [MdCard, MdCheckbox, MdButton, MdIcon, MdToolbar, MD_INPUT_DIRECTIVES]
 })
 export class InputDemo {
   dividerColor: boolean;

src/demo-app/list/list-demo.html

@@ -81,7 +81,7 @@ <h2>Nav lists</h2>
       <md-list-item *ngFor="#link of links">
         <a md-line href="http://www.google.com">{{ link.name }}</a>
         <button md-icon-button (click)="infoClicked=!infoClicked">
-          <i class="material-icons">info</i>
+          <md-icon>info</md-icon>
         </button>
       </md-list-item>
     </md-nav-list>
@@ -96,7 +96,7 @@ <h2>Nav lists</h2>
       <md-list-item *ngFor="#link of links">
         <a md-line href="http://www.google.com">{{ link.name }}</a>
         <button md-icon-button (click)="infoClicked=!infoClicked">
-          <i class="material-icons">info</i>
+          <md-icon class="material-icons">info</md-icon>
         </button>
       </md-list-item>
     </md-nav-list>