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

2026-09-14 13:54:52 +08:00 · 2016-04-26 14:14:24 -04:00
parent f4a7266b09
commit a9bc5fac8e
13 changed files with 64 additions and 61 deletions
@@ -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.
@@ -107,7 +107,7 @@ $md-mini-fab-padding: 8px !default;
  height: $size;
  padding: 0;

-  i {
+  i, md-icon {
    padding: $padding 0;
  }

@@ -13,7 +13,5 @@ md-icon {
  display: inline-block;
  fill: currentColor;
  height: $md-icon-size;
-  margin: auto;
-  vertical-align: middle;
  width: $md-icon-size;
 }
@@ -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.
@@ -3,10 +3,10 @@
    <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>

@@ -14,10 +14,10 @@
    <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>
@@ -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;
@@ -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>
@@ -13,7 +13,9 @@

 .demo-icons {
  font-size: 100%;
+  height: inherit;
  vertical-align: top;
+  width: inherit;
 }

 .demo-transform {
@@ -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;
@@ -81,7 +81,7 @@
      <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 @@
      <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>
@@ -13,14 +13,14 @@
    margin-top: 20px;
  }

+  md-icon {
+    color: rgba(0,0,0,0.12);
+  }
+
  [md-list-icon] {
    color: white;
    background: rgba(0,0,0,0.3);
  }
-
-  i {
-    color: rgba(0,0,0,0.12);
-  }
 }

 .demo-secondary-text {
@@ -2,34 +2,34 @@

  <p>
    <md-toolbar>
-      <i class="material-icons demo-toolbar-icon">menu</i>
+      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

-      <i class="material-icons">code</i>
+      <md-icon>code</md-icon>
    </md-toolbar>
  </p>

  <p>
    <md-toolbar color="primary">
-      <i class="material-icons demo-toolbar-icon">menu</i>
+      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Primary Toolbar</span>

      <span class="demo-fill-remaining"></span>

-      <i class="material-icons">code</i>
+      <md-icon>code</md-icon>
    </md-toolbar>
  </p>

  <p>
    <md-toolbar color="accent">
-      <i class="material-icons demo-toolbar-icon">menu</i>
+      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Accent Toolbar</span>

      <span class="demo-fill-remaining"></span>

-      <i class="material-icons">code</i>
+      <md-icon>code</md-icon>
    </md-toolbar>
  </p>

@@ -51,7 +51,7 @@

        <span class="demo-fill-remaining"></span>

-        <i class="material-icons demo-toolbar-icon">verified_user</i>
+        <md-icon class="demo-toolbar-icon">verified_user</md-icon>
      </md-toolbar-row>

      <md-toolbar-row>
@@ -59,8 +59,8 @@

        <span class="demo-fill-remaining"></span>

-        <i class="material-icons demo-toolbar-icon">favorite</i>
-        <i class="material-icons demo-toolbar-icon">delete</i>
+        <md-icon class="demo-toolbar-icon">favorite</md-icon>
+        <md-icon class="demo-toolbar-icon">delete</md-icon>
      </md-toolbar-row>
    </md-toolbar>
  </p>
@@ -1,11 +1,12 @@
 import {Component} from 'angular2/core';
+import {MdIcon} from '../../components/icon/icon';
 import {MdToolbar} from '../../components/toolbar/toolbar';

@Component({
  selector: 'toolbar-demo',
  templateUrl: 'demo-app/toolbar/toolbar-demo.html',
  styleUrls: ['demo-app/toolbar/toolbar-demo.css'],
-  directives: [MdToolbar]
+  directives: [MdToolbar, MdIcon]
 })
 export class ToolbarDemo {