feat(mdButton): add icon button for toolbars, etc.

Closes #2091, Closes #1796, Closes #2106

docs/app/css/style.css

@@ -265,12 +265,6 @@ code:not(.highlight) {
     line-height: 40px;
     text-indent: 15px;
   }
-.docs-menu-icon {
-  background: none;
-  border: none;
-  margin-right: 16px;
-  padding: 0;
-}
 .docs-menu-separator-icon {
   margin: 0;
   padding: 0 10px;

docs/config/template/index.template.html

@@ -61,9 +61,9 @@ <h2 class="menu-heading md-subhead" ng-if="section.type === 'heading'" id="headi
     <md-toolbar>
 
       <div class="md-toolbar-tools docs-toolbar-tools" ng-click="openMenu()" tabIndex="-1">
-        <button class="docs-menu-icon" hide-gt-sm aria-label="Toggle Menu">
+        <md-button class="md-icon-button" hide-gt-sm aria-label="Toggle Menu">
           <md-icon md-svg-src="img/icons/ic_menu_24px.svg"></md-icon>
-        </button>
+        </md-button>
         <div layout="row" flex class="fill-height">
           <h2 class="md-toolbar-item md-breadcrumb">
             <span ng-if="menu.currentPage.name !== menu.currentSection.name">

src/components/button/button.scss

@@ -14,6 +14,10 @@ $button-fab-mini-line-height: 4.00rem !default;
 
 $button-fab-toast-offset: $button-fab-height * 0.75;
 
+$icon-button-height: 4.800rem !default;
+$icon-button-width: 4.800rem !default;
+$icon-button-margin: 0.600rem !default;
+
 /**
  * Position a FAB button.
  */
@@ -42,6 +46,8 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
   line-height: $button-line-height;
   background: transparent;
   white-space: nowrap;
+  // override for FAB, icon buttons, etc.
+  min-width: $button-min-width;
 
   text-align: center;
 
@@ -92,8 +98,11 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
     }
   }
 
-  &:not(.md-fab) {
-    min-width: $button-min-width;
+  &.md-icon-button {
+    margin: 0 $icon-button-margin;
+    height: $icon-button-height;
+    min-width: 0;
+    width: $icon-button-width;
   }
 
   &.md-fab {
@@ -106,6 +115,7 @@ $button-fab-toast-offset: $button-fab-height * 0.75;
     z-index: $z-index-fab;
 
     line-height: $button-fab-line-height;
+    min-width: 0;
     width: $button-fab-width;
     height: $button-fab-height;
     vertical-align: middle;

src/components/button/demoBasicUsage/index.html

@@ -1,25 +1,26 @@
 
 <div ng-controller="AppCtrl">
-  <md-content >
+  <md-content>
 
     <section layout="row" layout-sm="column" layout-align="center center">
       <md-button>{{title1}}</md-button>
       <md-button md-no-ink class="md-primary">Primary (md-noink)</md-button>
       <md-button ng-disabled="true" class="md-primary">Disabled</md-button>
       <md-button class="md-warn">{{title4}}</md-button>
+      <div class="label">Flat</div>
     </section>
 
     <section layout="row" layout-sm="column" layout-align="center center">
       <md-button class="md-raised">Button</md-button>
       <md-button class="md-raised md-primary">Primary</md-button>
       <md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
       <md-button class="md-raised md-warn">Warn</md-button>
-      <div class="label">raised</div>
+      <div class="label">Raised</div>
     </section>
 
     <section layout="row" layout-sm="column" layout-align="center center">
         <md-button class="md-fab" aria-label="Eat cake" ng-href="#">
-            <md-icon md-svg-src="img/icons/cake.svg" style="margin-top:12px;"></md-icon>
+            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
         </md-button>
 
         <md-button class="md-fab md-primary" aria-label="Use Android">
@@ -35,7 +36,7 @@
         </md-button>
 
         <md-button class="md-fab md-mini" aria-label="Eat cake" ng-href="#">
-            <md-icon md-svg-src="img/icons/cake.svg" style="margin-top:6px;"></md-icon>
+            <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
         </md-button>
 
         <md-button class="md-fab md-mini md-primary" aria-label="Use Android">
@@ -60,5 +61,17 @@
       <div class="label">Themed</div>
     </section>
 
+    <section layout="row" layout-sm="column" layout-align="center center">
+      <md-button class="md-icon-button md-primary" aria-label="Settings">
+        <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
+      </md-button>
+      <md-button class="md-icon-button md-accent" aria-label="Favorite">
+        <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
+      </md-button>
+      <md-button class="md-icon-button" aria-label="More">
+        <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
+      </md-button>
+      <div class="label">Icon Button</div>
+    </section>
   </md-content>
 </div>

src/components/toast/toast.scss

@@ -73,6 +73,10 @@ md-toast {
     cursor: pointer;
     text-transform: uppercase;
     float: right;
+
+    &.md-button {
+      min-width: 0;
+    }
   }
 }
 
@@ -107,7 +111,7 @@ md-toast {
       top: $toast-margin;
     }
 
-    /* 
+    /*
      * When the toast doesn't take up the whole screen,
      * make it rotate when the user swipes it away
      */

src/components/toolbar/demoBasicUsage/index.html

@@ -4,15 +4,25 @@
   <md-content>
 
     <md-toolbar>
-      <h2 class="md-toolbar-tools">
-        <span>Toolbar</span>
-      </h2>
+      <div class="md-toolbar-tools">
+        <md-button class="md-icon-button" aria-label="Settings">
+          <md-icon md-svg-icon="img/icons/menu.svg"></md-icon>
+        </md-button>
+        <h2>
+          <span>Toolbar with Icon Buttons</span>
+        </h2>
+        <span flex></span>
+        <md-button class="md-icon-button" aria-label="Favorite">
+          <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
+        </md-button>
+        <md-button class="md-icon-button" aria-label="More">
+          <md-icon md-svg-icon="img/icons/more_vert.svg"></md-icon>
+        </md-button>
+      </div>
     </md-toolbar>
 
     <br>
 
-    <br>
-
     <md-toolbar class="md-tall md-accent">
       <h2 class="md-toolbar-tools">
         <span>Toolbar: tall (md-accent)</span>
@@ -27,6 +37,5 @@ <h2 class="md-toolbar-tools md-toolbar-tools-bottom">
         <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
       </h2>
     </md-toolbar>
-
   </md-content>
 </div>

src/components/toolbar/demoBasicUsage/script.js

@@ -3,12 +3,4 @@ angular.module('toolbarDemo1', ['ngMaterial'])
 
 .controller('AppCtrl', function($scope) {
 
-})
-
-.directive('svgIcon', function() {
-  return {
-    restrict: 'E',
-    replace: true,
-    template: '<svg viewBox="0 0 24 24" style="pointer-events: none;"><g><g><rect fill="none" width="24" height="24"></rect><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></g></svg>'
-  };
 });

src/components/toolbar/toolbar.scss

@@ -5,6 +5,8 @@ $toolbar-tall-height: 128px !default;
 $toolbar-indent-margin: 64px !default;
 $toolbar-padding: 16px !default;
 
+$icon-button-margin-offset: -0.800rem !default;
+
 md-toolbar {
   box-sizing: border-box;
   display: flex;
@@ -76,6 +78,14 @@ md-toolbar {
   .md-tools {
     margin-left: auto;
   }
+
+  .md-button:first-of-type {
+    margin-left: $icon-button-margin-offset;
+  }
+  .md-button:last-of-type:not(:first-of-type) {
+    margin-right: $icon-button-margin-offset;
+  }
+
   @media screen and (-ms-high-contrast: active) {
     border-bottom: 1px solid #fff;
   }