Add Material Icon examples (#31)

* Update dependency to angular: 4.0.0-alpha+1
* Migrate examples use of Glyph to Material Icon.
* Fix disabled style in Material Button example.

Author: nshahan

lib/app_component.dart

@@ -5,12 +5,12 @@ import 'package:angular/angular.dart';
 import 'package:angular_components/angular_components.dart';
 
 import 'src/demo_app/demo_app.dart';
-import 'src/glyph_demo/glyph_demo.dart';
 import 'src/material_button_demo/material_button_demo.dart';
 import 'src/material_checkbox_demo/material_checkbox_demo.dart';
 import 'src/material_chips_demo/material_chips_demo.dart';
 import 'src/material_dialog_demo/material_dialog_demo.dart';
 import 'src/material_expansionpanel_demo/material_expansionpanel_demo.dart';
+import 'src/material_icon_demo/material_icon_demo.dart';
 import 'src/material_input_demo/material_input_demo.dart';
 import 'src/material_list_demo/material_list_demo.dart';
 import 'src/material_popup_demo/material_popup_demo.dart';
@@ -32,12 +32,12 @@ import 'src/scorecard_demo/scorecard_demo.dart';
   styleUrls: const ['app_component.css'],
   directives: const [
     DemoAppComponent,
-    GlyphDemoComponent,
     MaterialButtonDemoComponent,
     MaterialCheckboxDemoComponent,
     MaterialChipsDemoComponent,
     MaterialDialogDemoComponent,
     MaterialExpansionpanelDemoComponent,
+    MaterialIconDemoComponent,
     MaterialInputDemoComponent,
     MaterialListDemoComponent,
     MaterialPopupDemoComponent,

lib/app_component.html

@@ -6,7 +6,7 @@
 <p>Examples:</p>
 <nav>
   <ul>
-    <li><a href="#Glyphs">Glyphs</a></li>
+    <li><a href="#Icons">Icons</a></li>
     <li><a href="#Buttons">Buttons</a></li>
     <li><a href="#Input">Input Boxes</a></li>
     <li><a href="#Checkboxes">Checkboxes</a></li>
@@ -42,23 +42,23 @@ <h2>Demo App</h2>
 <demo-app></demo-app>
 <hr>
 
-<a name="Glyphs"></a>
-<h2>Glyphs</h2>
+<a name="Icons"></a>
+<h2>Icons</h2>
 <ul class="source-links">
   <li>
-    <a href="https://github.com/dart-lang/angular_components/tree/master/lib/src/components/glyph"
+    <a href="https://github.com/dart-lang/angular_components/tree/master/lib/src/components/material_icon"
        target="_blank">
       Component Source
     </a>
   </li>
   <li>
-    <a href="https://github.com/dart-lang/angular_components_example/tree/master/lib/src/glyph_demo"
+    <a href="https://github.com/dart-lang/angular_components_example/tree/master/lib/src/material_icon_demo"
        target="_blank">
       Example Source
     </a>
   </li>
 </ul>
-<glyph-demo></glyph-demo>
+<material_icon-demo></material_icon-demo>
 <hr>
 
 <a name="Buttons"></a>

lib/src/glyph_demo/glyph_demo.dart

@@ -4,11 +4,11 @@
  * BSD-style license that can be found in the LICENSE file.
  */
 
-.red:not([raised]) {
+.red:not([raised]):not([disabled]) {
   color: #f44336;
 }
 
-.red[raised] {
+.red[raised]:not([disabled]) {
   background-color: #f44336;
   color: white;
 }

lib/src/glyph_demo/glyph_demo.html

@@ -12,7 +12,7 @@ import 'package:angular_components/angular_components.dart';
   directives: const [
     MaterialButtonComponent,
     MaterialFabComponent,
-    GlyphComponent
+    MaterialIconComponent,
   ],
 )
 class MaterialButtonDemoComponent {

lib/src/material_button_demo/material_button_demo.css

@@ -32,7 +32,7 @@ <h3>Without min-width and margin</h3>
 <section class="margin">
   <h3>With Icon</h3>
   <material-button icon>
-    <glyph icon="check"></glyph>
+    <material-icon icon="check"></material-icon>
   </material-button>
 </section>
 
@@ -43,9 +43,9 @@ <h3>
     <strong>B</strong>utton
   </h3>
   <material-fab raised>
-    <glyph icon="add"></glyph>
+    <material-icon icon="add"></material-icon>
   </material-fab>
   <material-fab mini raised>
-    <glyph icon="check"></glyph>
+    <material-icon icon="check"></material-icon>
   </material-fab>
 </section>

lib/src/material_button_demo/material_button_demo.dart

@@ -13,9 +13,9 @@ import 'package:angular_components/angular_components.dart';
       CORE_DIRECTIVES,
       AutoDismissDirective,
       AutoFocusDirective,
-      GlyphComponent,
       MaterialButtonComponent,
       MaterialDialogComponent,
+      MaterialIconComponent,
       ModalComponent,
     ])
 class MaterialDialogDemoComponent {

lib/src/material_button_demo/material_button_demo.html

@@ -226,7 +226,7 @@ <h3>Info dialogs</h3>
 
     <div header>
       <material-button icon autoFocus (trigger)="showInfoDialog = false">
-        <glyph icon="close"></glyph>
+        <material-icon icon="close"></material-icon>
       </material-button>
 
       <h3>Information</h3>
@@ -258,7 +258,7 @@ <h3>Information</h3>
 
     <div header>
       <material-button icon autoFocus (trigger)="showAutoDismissDialog = false">
-        <glyph icon="close"></glyph>
+        <material-icon icon="close"></material-icon>
       </material-button>
 
       <h3>Auto Dismiss</h3>
@@ -285,7 +285,7 @@ <h3>Custom dialogs</h3>
       <material-button icon
                        autoFocus
                        (trigger)="showCustomColorsDialog = false">
-        <glyph icon="close"></glyph>
+        <material-icon icon="close"></material-icon>
       </material-button>
 
       <h3>Information</h3>

lib/src/material_dialog_demo/material_dialog_demo.dart

@@ -0,0 +1,26 @@
+// Copyright (c) 2017, the Dart project authors.  Please see the AUTHORS file
+// for details. All rights reserved. Use of this source code is governed by a
+// BSD-style license that can be found in the LICENSE file.
+
+import 'package:angular/angular.dart';
+import 'package:angular_components/angular_components.dart';
+
+@Component(
+  selector: 'material_icon-demo',
+  templateUrl: 'material_icon_demo.html',
+  directives: const [
+    MaterialButtonComponent,
+    MaterialIconComponent,
+    MaterialInputComponent,
+  ],
+  exports: const [done, doneAll, doneOutline],
+)
+class MaterialIconDemoComponent {
+  var iconModel = done;
+  var iconColor = 'blue';
+  var iconName = 'alarm';
+}
+
+const done = const Icon('done');
+const doneAll = const Icon('done_all');
+const doneOutline = const Icon('done_outline');