fix(button): hover, disabled, alignment, docs

Includes component fixes after global CSS updates
chore(bottomSheet): use md-icon in demos

Closes #1607, Closes #1687, Closes #1690, Closes #1832, Closes #1907, Closes #1987, Closes #2009, Closes #2057

docs/app/css/style.css

@@ -554,7 +554,7 @@ md-content.demo-source-container > hljs > pre > code.highlight {
 }
 
 .dashed-bottom {
-  border-bottom: dashed 1px rgb(224, 224, 224);;
+  border-bottom: dashed 1px rgb(224, 224, 224);
   padding-bottom: 10px;
 }
 

src/components/bottomSheet/bottomSheet.scss

@@ -146,6 +146,7 @@ md-bottom-sheet {
       }
 
       .md-grid-item-content {
+        border: 1px solid transparent;
         display: flex;
         flex-direction: column;
         align-items: center;

src/components/bottomSheet/demoBasicUsage/bottom-sheet-grid-template.html

@@ -2,10 +2,8 @@
   <md-list>
     <md-item ng-repeat="item in items">
 
-      <md-button class="md-grid-item-content" aria-label="{{item.name}}" ng-click="listItemClick($index)">
-        <div class="md-icon-container">
-          <md-inline-grid-icon icon="{{item.icon}}"></md-inline-grid-icon>
-        </div>
+      <md-button class="md-grid-item-content" ng-click="listItemClick($index)">
+        <md-icon md-svg-src="{{item.icon}}"></md-icon>
         <div class="md-grid-text"> {{ item.name }} </div>
       </md-button>
 

src/components/bottomSheet/demoBasicUsage/bottom-sheet-list-template.html

@@ -2,9 +2,8 @@
   <md-subheader>Comment Actions</md-subheader>
   <md-list>
     <md-item ng-repeat="item in items">
-      <md-button aria-label="{{item.name}}" ng-click="listItemClick($index)">
-        <!-- Using custom inline icon until md-icon is ready. DONT USE ME! -->
-        <md-inline-list-icon icon="{{item.icon}}"></md-inline-list-icon>
+      <md-button ng-click="listItemClick($index)">
+        <md-icon md-svg-src="{{item.icon}}"></md-icon>
         <span class="md-inline-list-icon-label">{{ item.name }}</span>
       </md-button>
     </md-item>

src/components/bottomSheet/demoBasicUsage/index.html

@@ -2,11 +2,10 @@
   <p style="padding-left: 20px;" class="md-body-1">
     Bottom sheet can be dismissed with the service or a swipe down.
   </p>
-  <div class="bottom-sheet-demo inset" layout="column" layout-sm="row" layout-align="center">
+  <div class="bottom-sheet-demo inset" layout="row" layout-sm="column" layout-align="center">
     <md-button class="md-primary" ng-click="showListBottomSheet($event)">
       Show as List
     </md-button>
-    <div style="width:50px;"></div>
     <md-button class="md-primary" ng-click="showGridBottomSheet($event)">
       Show as Grid
     </md-button>

src/components/bottomSheet/demoBasicUsage/script.js

@@ -1,5 +1,17 @@
 angular.module('bottomSheetDemo1', ['ngMaterial'])
-
+.config(function($mdIconProvider) {
+    $mdIconProvider
+      .icon('share-arrow', 'img/icons/share-arrow.svg', 24)
+      .icon('upload', 'img/icons/upload.svg', 24)
+      .icon('copy', 'img/icons/copy.svg', 24)
+      .icon('print', 'img/icons/print.svg', 24)
+      .icon('hangout', 'img/icons/hangout.svg', 24)
+      .icon('mail', 'img/icons/mail.svg', 24)
+      .icon('message', 'img/icons/message.svg', 24)
+      .icon('copy2', 'img/icons/copy2.svg', 24)
+      .icon('facebook', 'img/icons/facebook.svg', 24)
+      .icon('twitter', 'img/icons/twitter.svg', 24);
+  })
 .controller('BottomSheetExample', function($scope, $timeout, $mdBottomSheet) {
   $scope.alert = '';
 
@@ -29,7 +41,7 @@ angular.module('bottomSheetDemo1', ['ngMaterial'])
 .controller('ListBottomSheetCtrl', function($scope, $mdBottomSheet) {
 
   $scope.items = [
-    { name: 'Share', icon: 'share' },
+    { name: 'Share', icon: 'share-arrow' },
     { name: 'Upload', icon: 'upload' },
     { name: 'Copy', icon: 'copy' },
     { name: 'Print this page', icon: 'print' },
@@ -41,12 +53,11 @@ angular.module('bottomSheetDemo1', ['ngMaterial'])
   };
 })
 .controller('GridBottomSheetCtrl', function($scope, $mdBottomSheet) {
-
   $scope.items = [
     { name: 'Hangout', icon: 'hangout' },
     { name: 'Mail', icon: 'mail' },
     { name: 'Message', icon: 'message' },
-    { name: 'Copy', icon: 'copy' },
+    { name: 'Copy', icon: 'copy2' },
     { name: 'Facebook', icon: 'facebook' },
     { name: 'Twitter', icon: 'twitter' },
   ];
@@ -55,4 +66,24 @@ angular.module('bottomSheetDemo1', ['ngMaterial'])
     var clickedItem = $scope.items[$index];
     $mdBottomSheet.hide(clickedItem);
   };
-});
+})
+.run(function($http, $templateCache) {
+
+    var urls = [
+      'img/icons/share-arrow.svg',
+      'img/icons/upload.svg',
+      'img/icons/copy.svg',
+      'img/icons/print.svg',
+      'img/icons/hangout.svg',
+      'img/icons/mail.svg',
+      'img/icons/message.svg',
+      'img/icons/copy2.svg',
+      'img/icons/facebook.svg',
+      'img/icons/twitter.svg'
+    ];
+
+    angular.forEach(urls, function(url) {
+      $http.get(url, {cache: $templateCache});
+    });
+
+  });