docs(toolbar,menuBar): add md-toolbar-filler examples (angular#11260)

register the icon sets in the docs app
fix strange absolute styling alignment issue

Relates to angular#11258

docs/app/js/app.js

@@ -63,13 +63,18 @@ function(SERVICES, COMPONENTS, DEMOS, PAGES,
     .dark();
 
   $mdIconProvider.icon('md-toggle-arrow', 'img/icons/toggle-arrow.svg', 48);
+  $mdIconProvider
+    .iconSet('communication', 'img/icons/sets/communication-icons.svg', 24)
+    .iconSet('device', 'img/icons/sets/device-icons.svg', 24)
+    .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
+    .iconSet('symbol', 'img/icons/sets/symbol-icons.svg', 24)
+    .defaultIconSet('img/icons/sets/core-icons.svg', 24);
 
   $mdThemingProvider.theme('default')
       .primaryPalette('docs-blue')
       .accentPalette('docs-red');
 
-  $mdThemingProvider
-      .enableBrowserColor();
+  $mdThemingProvider.enableBrowserColor();
 
   angular.forEach(PAGES, function(pages, area) {
     angular.forEach(pages, function(page) {

src/components/menuBar/demoBasicUsage/index.html

@@ -1,6 +1,9 @@
 <div ng-controller="DemoBasicCtrl as ctrl" ng-cloak>
   <md-toolbar class="md-menu-toolbar">
     <div layout="row">
+      <md-toolbar-filler layout layout-align="center center">
+        <md-icon md-svg-icon="content-paste"></md-icon>
+      </md-toolbar-filler>
       <div>
         <h2 class="md-toolbar-tools">Untitled document</h2>
         <md-menu-bar>

src/components/menuBar/demoDynamicNestedMenus/index.html

@@ -1,8 +1,11 @@
 <div ng-controller="DemoDynamicNestedMenusCtrl as ctrl" ng-cloak>
   <md-toolbar class="md-menu-toolbar">
     <div layout="row">
+      <md-toolbar-filler layout layout-align="center center">
+        <md-icon md-svg-icon="communication:business"></md-icon>
+      </md-toolbar-filler>
       <div>
-        <h2 class="md-toolbar-tools">Untitled document</h2>
+        <h2 class="md-toolbar-tools">Mission Statement</h2>
         <md-menu-bar>
           <md-menu>
             <button aria-label="Open menu" ng-click="$mdMenu.open($event)">
@@ -35,7 +38,7 @@ <h2 class="md-toolbar-tools">Untitled document</h2>
 
   <md-content class="page-container">
     <md-card class="page">
-      <h1>Untitled document</h1>
+      <h1>Mission Statement</h1>
       <p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu
         leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras mattis
         consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh

src/components/toolbar/demoBasicUsage/index.html

@@ -1,8 +1,5 @@
-
-<div ng-controller="AppCtrl" ng-cloak>
-
+<div ng-controller="BasicDemoCtrl" ng-cloak>
   <md-content>
-
     <br>
 
     <md-toolbar class="md-hue-2">
@@ -14,49 +11,56 @@
         <h2 flex md-truncate>Toolbar with Disabled/Enabled Icon Buttons</h2>
 
         <md-button class="md-icon-button" aria-label="Favorite">
-          <md-icon md-svg-icon="img/icons/favorite.svg" style="color: greenyellow;"></md-icon>
+          <md-icon md-svg-icon="img/icons/favorite.svg" class="favorite-icon"></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>
 
     <md-toolbar>
       <div class="md-toolbar-tools">
         <md-button aria-label="Go Back">
-          Go Back
+          Back
         </md-button>
 
-        <md-truncate style="position: absolute; left: 90px; right: 170px; top: 13px; bottom: 13px;">Toolbar with Standard Buttons</md-truncate>
-
-        <span flex></span>
-        <md-button class="md-raised" aria-label="Learn More">
+        <h2 flex md-truncate>Toolbar with Standard Buttons and a Mini FAB</h2>
+        <md-button class="md-raised md-accent md-hue-3" aria-label="Learn More">
           Learn More
         </md-button>
-        <md-button class="md-fab md-mini" aria-label="Favorite">
+        <md-button class="md-fab md-mini md-hue-3" aria-label="Favorite">
           <md-icon md-svg-icon="img/icons/favorite.svg"></md-icon>
         </md-button>
       </div>
     </md-toolbar>
+    <br>
 
+    <md-toolbar class="md-hue-1">
+      <div layout="row">
+        <md-toolbar-filler layout="row" layout-align="center center">
+          <md-icon id="filler-icon" md-svg-icon="img/icons/octicon-repo.svg"></md-icon>
+        </md-toolbar-filler>
+        <h2 class="md-toolbar-tools">
+          <span>Toolbar: with filler and icon (md-hue-1)</span>
+        </h2>
+      </div>
+    </md-toolbar>
     <br>
 
     <md-toolbar class="md-tall md-accent">
       <h2 class="md-toolbar-tools">
         <span>Toolbar: tall (md-accent)</span>
       </h2>
     </md-toolbar>
-
     <br>
 
     <md-toolbar class="md-tall md-warn md-hue-3">
       <span flex></span>
       <h2 class="md-toolbar-tools">
-        <span class="md-flex">Toolbar: tall with actions pin to the bottom (md-warn md-hue-3)</span>
+        <span class="md-flex">Toolbar: tall with actions pinned to the bottom (md-warn md-hue-3)</span>
       </h2>
     </md-toolbar>
   </md-content>

src/components/toolbar/demoBasicUsage/script.js

@@ -1,6 +1,5 @@
+angular.module('toolbarDemoBasic', ['ngMaterial'])
 
-angular.module('toolbarDemo1', ['ngMaterial'])
-
-.controller('AppCtrl', function($scope) {
+.controller('BasicDemoCtrl', function($scope) {
 
 });

src/components/toolbar/demoBasicUsage/style.scss

@@ -0,0 +1,14 @@
+md-toolbar {
+  .md-button.md-icon-button {
+    .favorite-icon {
+      fill: #DE3641; // docs-red A100
+    }
+  }
+  md-toolbar-filler {
+    background-color: #e0e0e0; // grey 200
+
+    #filler-icon {
+      fill: #4C9EF1; // docs-blue 300 - hue-1
+    }
+  }
+}