dart-archive · nshahan · Jul 20, 2017 · Jul 20, 2017 · Jul 20, 2017
diff --git a/lib/app_component.dart b/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,

diff --git a/lib/app_component.html b/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>

diff --git a/lib/src/glyph_demo/glyph_demo.dart b/lib/src/glyph_demo/glyph_demo.dart
diff --git a/lib/src/glyph_demo/glyph_demo.html b/lib/src/glyph_demo/glyph_demo.html
diff --git a/lib/src/material_button_demo/material_button_demo.css b/lib/src/material_button_demo/material_button_demo.css
@@ -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;
 }

diff --git a/lib/src/material_button_demo/material_button_demo.dart b/lib/src/material_button_demo/material_button_demo.dart
@@ -12,7 +12,7 @@ import 'package:angular_components/angular_components.dart';
   directives: const [
     MaterialButtonComponent,
     MaterialFabComponent,
-    GlyphComponent
+    MaterialIconComponent,
   ],
 )
 class MaterialButtonDemoComponent {

diff --git a/lib/src/material_button_demo/material_button_demo.html b/lib/src/material_button_demo/material_button_demo.html
@@ -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>
diff --git a/lib/src/material_dialog_demo/material_dialog_demo.dart b/lib/src/material_dialog_demo/material_dialog_demo.dart
@@ -13,9 +13,9 @@ import 'package:angular_components/angular_components.dart';
       CORE_DIRECTIVES,
       AutoDismissDirective,
       AutoFocusDirective,
-      GlyphComponent,
       MaterialButtonComponent,
       MaterialDialogComponent,
+      MaterialIconComponent,
       ModalComponent,
     ])
 class MaterialDialogDemoComponent {

diff --git a/lib/src/material_dialog_demo/material_dialog_demo.html b/lib/src/material_dialog_demo/material_dialog_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>

diff --git a/lib/src/material_icon_demo/material_icon_demo.dart b/lib/src/material_icon_demo/material_icon_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');
diff --git a/lib/src/material_icon_demo/material_icon_demo.html b/lib/src/material_icon_demo/material_icon_demo.html
@@ -0,0 +1,86 @@
+<!--
+  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.
+-->
+<h3>Basic Usage</h3>
+
+<material-icon icon="favorite"></material-icon>
+<material-icon icon="business"></material-icon>
+<material-icon icon="thumb_up"></material-icon>
+<material-icon icon="bluetooth_connected"></material-icon>
+<material-icon icon="insert_photo"></material-icon>
+<material-icon icon="more_horiz"></material-icon>
+
+<p>
+  See <a href="https://www.google.com/design/icons/" target="_blank">available icons</a>.
+</p>
+
+<h4>Using a string identifier</h4>
+<div>
+  <material-icon [icon]="iconName"></material-icon>
+</div>
+<div>
+  <material-input #iconNameInput label="Enter an icon identifier"></material-input>
+  <material-button raised (trigger)="iconName = iconNameInput.inputText">Apply</material-button>
+</div>
+<div>
+  Current icon identifier: {{iconName}}
+</div>
+
+<h4>Using an icon model</h4>
+<material-icon [icon]="iconModel"></material-icon>
+<div>
+  <material-button raised (trigger)="iconModel = done">done</material-button>
+  <material-button raised (trigger)="iconModel = doneAll">done_all</material-button>
+  <material-button raised (trigger)="iconModel = doneOutline">done_outline</material-button>
+</div>
+
+<h3>Styling</h3>
+<h4>Color</h4>
+<p>Set the color of the icon using the css color property.</p>
+<material-icon [style.color]="iconColor" icon="pets"></material-icon>
+<div>
+  <material-input #iconColorInput label="Enter a new color here"></material-input>
+  <material-button raised (trigger)="iconColor = iconColorInput.inputText">Apply</material-button>
+</div>
+
+<h4>Size</h4>
+<p>Set the size of the icon using the size attribute.</p>
+<material-icon size="x-small" icon="bug_report"></material-icon>
+<material-icon size="small" icon="bug_report"></material-icon>
+<material-icon size="medium" icon="bug_report"></material-icon>
+<material-icon size="large" icon="bug_report"></material-icon>
+<material-icon size="x-large" icon="bug_report"></material-icon>
+<material-icon icon="bug_report"></material-icon>
+
+<p>
+  x-small 12px <material-icon size="x-small" icon="bug_report" baseline></material-icon><br/>
+  small 13px <material-icon size="small" icon="bug_report" baseline></material-icon><br/>
+  medium 16px <material-icon size="medium" icon="bug_report" baseline></material-icon><br/>
+  large 18px <material-icon size="large" icon="bug_report" baseline></material-icon><br/>
+  x-large 20px <material-icon size="x-large" icon="bug_report" baseline></material-icon><br/>
+  Default (unspecified) 24px <material-icon icon="bug_report" baseline></material-icon>
+</p>
+
+<h4>Baseline</h4>
+<p>Use the baseline attribute to align an icon with surrounding text.</p>
+<p>
+  This
+  <material-icon icon="flight_land"></material-icon>
+  is <b>not</b> aligned with surrounding text.
+</p>
+<p>
+  This
+  <material-icon icon="flight_land" baseline></material-icon>
+  is aligned with surrounding text.
+</p>
+
+<h4>Light</h4>
+<p>Use the light attribute to reduce the opacity of the icon.</p>
+<p>
+  Light <material-icon icon="settings" baseline light></material-icon>
+</p>
+<p>
+  Not light <material-icon icon="settings" baseline></material-icon>
+</p>
diff --git a/lib/src/material_list_demo/material_list_demo.dart b/lib/src/material_list_demo/material_list_demo.dart
@@ -11,7 +11,7 @@ import 'package:angular_components/angular_components.dart';
   templateUrl: 'material_list_demo.html',
   directives: const [
     CORE_DIRECTIVES,
-    GlyphComponent,
+    MaterialIconComponent,
     MaterialListComponent,
     MaterialListItemComponent,
   ],

diff --git a/lib/src/material_list_demo/material_list_demo.html b/lib/src/material_list_demo/material_list_demo.html
@@ -96,8 +96,8 @@ <h3>Primary and Secondary Item Content</h3>
     </span>
   </material-list-item>
   <material-list-item>
-    <glyph icon="today" class="material-list-item-primary"
-           aria-hidden="true"></glyph>
+    <material-icon icon="today" class="material-list-item-primary"
+           aria-hidden="true"></material-icon>
     Item with primary icon
   </material-list-item>
   <material-list-item>
@@ -130,8 +130,8 @@ <h3>Grouping and Dividers</h3>
     </material-list-item>
   </div>
   <material-list-item>
-    <glyph icon="today" class="material-list-item-primary"
-           aria-hidden="true"></glyph>
+    <material-icon icon="today" class="material-list-item-primary"
+           aria-hidden="true"></material-icon>
     Item with primary icon
   </material-list-item>
   <material-list-item>

diff --git a/lib/src/material_select_demo/material_select_demo.dart b/lib/src/material_select_demo/material_select_demo.dart
@@ -229,9 +229,13 @@ class Language implements HasUIDisplayName {
 
 @Component(
     selector: 'example-renderer',
-    template: '<glyph icon="language"></glyph>{{disPlayName}}',
-    styles: const ['glyph { vertical-align: middle; margin-right: 8px; }'],
-    directives: const [GlyphComponent])
+    template: '<material-icon icon="language"></material-icon>{{disPlayName}}',
+    styles: const [
+      'material-icon { vertical-align: middle; margin-right: 8px; }'
+    ],
+    directives: const [
+      MaterialIconComponent
+    ])
 class ExampleRendererComponent implements RendersValue {
   String disPlayName = '';
 

diff --git a/lib/src/material_tooltip_demo/material_tooltip_demo.dart b/lib/src/material_tooltip_demo/material_tooltip_demo.dart
@@ -12,7 +12,7 @@ import 'package:angular_components/angular_components.dart';
   directives: const [
     ClickableTooltipTargetDirective,
     DarkThemeDirective,
-    GlyphComponent,
+    MaterialIconComponent,
     MaterialButtonComponent,
     MaterialIconTooltipComponent,
     MaterialInkTooltipComponent,