diff --git a/demos/common.scss b/demos/common.scss
index 2a88103e231..2111e858fed 100644
--- a/demos/common.scss
+++ b/demos/common.scss
@@ -22,6 +22,7 @@
 
 // Base style
 $mdc-theme-primary: $material-color-grey-900 !default;
+$mdc-theme-primary: $material-color-blue-500 !default;
 $mdc-theme-secondary: $material-color-light-green-a700 !default;
 
 // Import button and ripple mixins to apply overrides for dark theme
@@ -34,20 +35,19 @@ $mdc-theme-secondary: $material-color-light-green-a700 !default;
 @import "../packages/mdc-toolbar/mdc-toolbar";
 @import "../packages/mdc-typography/mdc-typography";
 
+$dark-button-color: $material-color-light-green-a200;
+
 fieldset {
   margin: 0;
   padding: 0;
   border: 0;
 }
 
-.mdc-toolbar {
-  a {
-    color: #f0f0f0;
-    text-decoration: none;
-  }
+.mdc-toolbar__icon,
+.mdc-toolbar__menu-icon {
+  @include mdc-toolbar-icon-ink-color(#f0f0f0);
 }
 
-$dark-button-color: $material-color-light-green-a200;
 .mdc-button {
   @include mdc-theme-dark {
     @include mdc-button-ink-color($dark-button-color);
@@ -89,7 +89,7 @@ $dark-button-color: $material-color-light-green-a200;
   background-color: rgba(0, 0, 0, .05);
 }
 
-/* Default padding on all examples. */
+// Default padding on all examples.
 section.example {
   margin: 24px;
   padding: 24px;
diff --git a/demos/toolbar/custom-toolbar.html b/demos/toolbar/custom-toolbar.html
new file mode 100644
index 00000000000..7591f86ff51
--- /dev/null
+++ b/demos/toolbar/custom-toolbar.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Custom Toolbar - Material Components Catalog</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/png" href="/images/logo_components_color_2x_web_48dp.png">
+    <script src="/assets/toolbar/toolbar.css.js"></script>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+  </head>
+  <body class="mdc-typography">
+    <header class="mdc-toolbar demo-toolbar demo-toolbar--custom">
+      <div class="mdc-toolbar__row">
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
+          <a href="#" class="material-icons mdc-toolbar__menu-icon demo-toolbar__menu-icon--custom">menu</a>
+          <span class="mdc-toolbar__title">Title</span>
+        </section>
+        <section class="mdc-toolbar__section mdc-toolbar__section--align-end" role="toolbar">
+          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Download" alt="Download">file_download</a>
+          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Print this page" alt="Print this page">print</a>
+          <a href="#" class="material-icons mdc-toolbar__icon demo-toolbar__icon--custom" aria-label="Bookmark this page" alt="Bookmark this page">bookmark</a>
+        </section>
+      </div>
+    </header>
+    <main>
+      <p class="demo-paragraph">
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+      </p>
+      <p class="demo-paragraph">
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+      </p>
+      <p class="demo-paragraph">
+        Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
+      </p>
+    </main>
+  </body>
+</html>
diff --git a/demos/toolbar/default-flexible-toolbar.html b/demos/toolbar/default-flexible-toolbar.html
index a74997fe48e..6f8a0ae7186 100644
--- a/demos/toolbar/default-flexible-toolbar.html
+++ b/demos/toolbar/default-flexible-toolbar.html
@@ -25,36 +25,11 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .mdc-toolbar__row:first-child::after {
-        background-image: url("../images/4-3.jpg");
-        background-size: cover;
-        background-position: center;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-      footer {
-        position: fixed;
-        bottom: 20px;
-        width: 100%;
-        text-align: center;
-        color: red;
-        background-color: rgba(0, 0, 0, 0.8);
-      }
     </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
-      <div class="mdc-toolbar__row">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior demo-toolbar">
+      <div class="mdc-toolbar__row demo-toolbar__row--with-image">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
@@ -77,7 +52,7 @@
         Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est.
       </p>
     </main>
-    <footer>
+    <footer class="demo-toolbar-floating-footer">
       <span>Flexible Expansion Ratio: <span id="ratio">0</span></span>
     </footer>
     <script src="/assets/material-components-web.js"></script>
diff --git a/demos/toolbar/default-toolbar.html b/demos/toolbar/default-toolbar.html
index 5e11330b9b3..1d98e424e8d 100644
--- a/demos/toolbar/default-toolbar.html
+++ b/demos/toolbar/default-toolbar.html
@@ -24,23 +24,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-    </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar demo-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
diff --git a/demos/toolbar/fixed-toolbar.html b/demos/toolbar/fixed-toolbar.html
index 37ecc40415a..49d96b42717 100644
--- a/demos/toolbar/fixed-toolbar.html
+++ b/demos/toolbar/fixed-toolbar.html
@@ -24,23 +24,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-    </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html
index fdbd524d043..19c041e8325 100644
--- a/demos/toolbar/index.html
+++ b/demos/toolbar/index.html
@@ -118,52 +118,76 @@
 
       <section class="examples">
         <div class="example">
-          <h2>Normal Toolbar <button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Normal Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./default-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./default-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Fixed Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Fixed Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./fixed-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./fixed-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Fixed Toolbar with Menu<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Fixed Toolbar with Menu</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./menu-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./menu-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Default Flexible Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Default Flexible Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./default-flexible-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./default-flexible-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Flexible Toolbar<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Flexible Toolbar</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-flexible-toolbar.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-flexible-toolbar.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Toolbar Fix Last Row<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Toolbar Fix Last Row</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-toolbar-fix-last-row.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-toolbar-fix-last-row.html" width="320" height="600"></iframe>
         </div>
 
         <div class="example">
-          <h2>Waterfall Flexible Toolbar with Custom Style<button type="button">Toggle RTL</button></h2>
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Waterfall Flexible Toolbar with Custom Style</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
           <p><a href="./waterfall-flexible-toolbar-custom-style.html" target="_blank">View in separate window</a></p>
           <iframe class="demo-container" src="./waterfall-flexible-toolbar-custom-style.html" width="320" height="600"></iframe>
         </div>
+
+        <div class="example">
+          <h2 class="demo-toolbar-example-heading">
+            <span class="demo-toolbar-example-heading__text">Custom Colored Toolbar and Icons</span>
+            <button type="button" class="mdc-button mdc-button--stroked mdc-button--dense demo-toolbar-example-heading__rtl-toggle-button">Toggle RTL</button></h2>
+          <p><a href="./custom-toolbar.html" target="_blank">View in separate window</a></p>
+          <iframe class="demo-container" src="./custom-toolbar.html" width="320" height="600"></iframe>
+        </div>
       </section>
     </main>
     <script>
diff --git a/demos/toolbar/menu-toolbar.html b/demos/toolbar/menu-toolbar.html
index 894e1254bd8..51db9fcfc64 100644
--- a/demos/toolbar/menu-toolbar.html
+++ b/demos/toolbar/menu-toolbar.html
@@ -24,26 +24,14 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
       #demo-menu {
         margin-top: 8px;
         margin-right: 8px;
       }
     </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
diff --git a/demos/toolbar/toolbar.scss b/demos/toolbar/toolbar.scss
index 9efe1ab3b9c..5bd668c54ff 100644
--- a/demos/toolbar/toolbar.scss
+++ b/demos/toolbar/toolbar.scss
@@ -15,5 +15,74 @@
 //
 
 @import "../common";
+@import "../../packages/mdc-button/mdc-button";
 @import "../../packages/mdc-list/mdc-list";
 @import "../../packages/mdc-menu/mdc-menu";
+@import "../../packages/mdc-theme/color-palette";
+@import "../../packages/mdc-toolbar/mdc-toolbar";
+@import "../../packages/mdc-typography/mdc-typography";
+
+.demo-toolbar-example-heading {
+  @include mdc-typography(display2);
+
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.demo-toolbar-example-heading__text {
+  flex-grow: 1;
+  margin-right: 16px;
+}
+
+.demo-toolbar-example-heading__rtl-toggle-button {
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.demo-toolbar {
+  margin: 0;
+}
+
+.demo-toolbar__row--with-image {
+  &:first-child::after {
+    background-image: url("/images/4-3.jpg");
+    background-size: cover;
+    background-position: center;
+  }
+}
+
+.demo-toolbar--custom {
+  @include mdc-toolbar-fill-color-accessible($material-color-red-900);
+}
+
+.demo-toolbar__menu-icon--custom,
+.demo-toolbar__icon--custom {
+  @include mdc-toolbar-icon-ink-color($material-color-red-100);
+
+  &:hover {
+    @include mdc-toolbar-icon-ink-color(white);
+  }
+}
+
+.demo-paragraph {
+  margin: 0;
+  padding: 20px 28px;
+}
+
+@media (max-width: 599px) {
+  .demo-paragraph {
+    padding: 16px;
+  }
+}
+
+.demo-toolbar-floating-footer {
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding: 8px;
+  color: white;
+  background-color: rgba(0, 0, 0, 0.7);
+}
diff --git a/demos/toolbar/waterfall-flexible-toolbar-custom-style.html b/demos/toolbar/waterfall-flexible-toolbar-custom-style.html
index 4d9da6e0ee4..132da4b646a 100644
--- a/demos/toolbar/waterfall-flexible-toolbar-custom-style.html
+++ b/demos/toolbar/waterfall-flexible-toolbar-custom-style.html
@@ -25,30 +25,10 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
       .demo-custom-scroll-title {
         line-height: 130%;
         margin-left: 0;
       }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-      footer {
-        position: fixed;
-        bottom: 20px;
-        width: 100%;
-        text-align: center;
-        color: red;
-        background-color: rgba(0, 0, 0, 0.8);
-      }
       #my-flexible-header {
         --mdc-toolbar-ratio-to-extend-flexible: 2;
         background-color: rgb(255, 64, 129);
@@ -59,8 +39,8 @@
       }
     </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall mdc-toolbar--flexible" id="my-flexible-header">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall mdc-toolbar--flexible demo-toolbar" id="my-flexible-header">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-center">
           <span class="mdc-toolbar__title demo-custom-scroll-title">Hey!</span>
@@ -80,7 +60,7 @@
         </p>
       </div>
     </main>
-    <footer>
+    <footer class="demo-toolbar-floating-footer">
       <span>Flexible Expansion Ratio: <span id="ratio">0</span></span>
     </footer>
     <script src="/assets/material-components-web.js"></script>
diff --git a/demos/toolbar/waterfall-flexible-toolbar.html b/demos/toolbar/waterfall-flexible-toolbar.html
index 8faeadc3cbc..e162cebea1e 100644
--- a/demos/toolbar/waterfall-flexible-toolbar.html
+++ b/demos/toolbar/waterfall-flexible-toolbar.html
@@ -24,37 +24,10 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .mdc-toolbar__row:first-child::after {
-        background-image: url("../images/4-3.jpg");
-        background-size: cover;
-        background-position: center;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-      footer {
-        position: fixed;
-        bottom: 20px;
-        width: 100%;
-        text-align: center;
-        color: red;
-        background-color: rgba(0, 0, 0, 0.8);
-      }
-    </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
-      <div class="mdc-toolbar__row">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior demo-toolbar">
+      <div class="mdc-toolbar__row demo-toolbar__row--with-image">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
@@ -80,7 +53,7 @@
         </p>
       </div>
     </main>
-    <footer>
+    <footer class="demo-toolbar-floating-footer">
       <span>Flexible Expansion Ratio: <span id="ratio">0</span></span>
     </footer>
     <script src="/assets/material-components-web.js"></script>
diff --git a/demos/toolbar/waterfall-toolbar-fix-last-row.html b/demos/toolbar/waterfall-toolbar-fix-last-row.html
index adc960d27c3..98690b64e66 100644
--- a/demos/toolbar/waterfall-toolbar-fix-last-row.html
+++ b/demos/toolbar/waterfall-toolbar-fix-last-row.html
@@ -25,43 +25,18 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .mdc-toolbar-demo .mdc-toolbar {
+      .demo-toolbar {
         background-color: #141395;
         transition: background-color .2s ease;
       }
-      .mdc-toolbar-demo .mdc-toolbar.mdc-toolbar--flexible-space-minimized {
+      .demo-toolbar.mdc-toolbar--flexible-space-minimized {
         background-color: #3f51b5;
       }
-      .mdc-toolbar__row:first-child::after {
-        background-image: url("../images/4-3.jpg");
-        background-size: cover;
-        background-position: center;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-      footer {
-        position: fixed;
-        bottom: 20px;
-        width: 100%;
-        text-align: center;
-        color: red;
-        background-color: rgba(0, 0, 0, 0.8);
-      }
     </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--fixed-lastrow-only mdc-toolbar--waterfall mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior">
-      <div class="mdc-toolbar__row">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--fixed-lastrow-only mdc-toolbar--waterfall mdc-toolbar--flexible mdc-toolbar--flexible-default-behavior demo-toolbar">
+      <div class="mdc-toolbar__row demo-toolbar__row--with-image">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
           <span class="mdc-toolbar__title">Title</span>
@@ -88,7 +63,7 @@
         </p>
       </div>
     </main>
-    <footer>
+    <footer class="demo-toolbar-floating-footer">
       <span>Flexible Expansion Ratio: <span id="ratio">0</span></span>
     </footer>
     <script src="/assets/material-components-web.js"></script>
diff --git a/demos/toolbar/waterfall-toolbar.html b/demos/toolbar/waterfall-toolbar.html
index 9fc915e43a1..5964866b62e 100644
--- a/demos/toolbar/waterfall-toolbar.html
+++ b/demos/toolbar/waterfall-toolbar.html
@@ -24,23 +24,9 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
-    <style>
-      .mdc-toolbar-demo {
-        margin: 0px;
-      }
-      .demo-paragraph {
-        margin: 0px;
-        padding: 20px 28px;
-      }
-      @media (max-width: 599px) {
-        .demo-paragraph {
-          padding: 16px;
-        }
-      }
-    </style>
   </head>
-  <body class="mdc-typography mdc-toolbar-demo">
-    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall">
+  <body class="mdc-typography">
+    <header class="mdc-toolbar mdc-toolbar--fixed mdc-toolbar--waterfall demo-toolbar">
       <div class="mdc-toolbar__row">
         <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
           <a href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>
diff --git a/packages/mdc-toolbar/README.md b/packages/mdc-toolbar/README.md
index 7c091278f29..dad4e0d14ee 100644
--- a/packages/mdc-toolbar/README.md
+++ b/packages/mdc-toolbar/README.md
@@ -339,6 +339,15 @@ Class | Description
 `mdc-toolbar__section--align-end` | Makes section align to the end
 `mdc-toolbar__section--shrink-to-fit`| Makes section take the width of its content
 
+## Sass Mixins
+
+Mixin | Description
+--- | ---
+`mdc-toolbar-ink-color($color)` | Sets the ink color of the toolbar
+`mdc-toolbar-fill-color($color)` | Sets the fill color of the toolbar
+`mdc-toolbar-fill-color-accessible($color)` | Sets the fill color of the toolbar and automatically sets a high-contrast ink color
+`mdc-toolbar-icon-ink-color($color)` | Sets the ink color of a toolbar icon
+
 ## JS Usage
 
 ### Including in code
diff --git a/packages/mdc-toolbar/_mixins.scss b/packages/mdc-toolbar/_mixins.scss
index 3de0d31e695..5c64b9b90b7 100644
--- a/packages/mdc-toolbar/_mixins.scss
+++ b/packages/mdc-toolbar/_mixins.scss
@@ -14,14 +14,38 @@
 // limitations under the License.
 //
 
+@import "@material/theme/variables"; // for mdc-theme-accessible-ink-color
 @import "./variables";
 
-/**
- * Applies styles to the different types of icons that can exist in toolbars.
- * Both .mdc-toolbar__icon and .mdc-toolbar__menu-icon share all styles except for
- * horizontal padding.
- */
-@mixin mdc-shared-icon-style() {
+//
+// Public
+//
+
+@mixin mdc-toolbar-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+@mixin mdc-toolbar-fill-color($color) {
+  @include mdc-theme-prop(background-color, $color);
+}
+
+@mixin mdc-toolbar-fill-color-accessible($color) {
+  @include mdc-toolbar-fill-color($color);
+  @include mdc-toolbar-ink-color(mdc-theme-accessible-ink-color($color));
+}
+
+@mixin mdc-toolbar-icon-ink-color($color) {
+  @include mdc-theme-prop(color, $color);
+}
+
+//
+// Private
+//
+
+// Applies styles to the different types of icons that can exist in toolbars.
+// Both .mdc-toolbar__icon and .mdc-toolbar__menu-icon share all styles except for
+// horizontal padding.
+@mixin mdc-toolbar-icon_() {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -30,4 +54,5 @@
   background-color: inherit;
   color: inherit;
   text-decoration: none;
+  cursor: pointer;
 }
diff --git a/packages/mdc-toolbar/mdc-toolbar.scss b/packages/mdc-toolbar/mdc-toolbar.scss
index eca633655bd..b74268c34f8 100644
--- a/packages/mdc-toolbar/mdc-toolbar.scss
+++ b/packages/mdc-toolbar/mdc-toolbar.scss
@@ -23,8 +23,7 @@
 
 // postcss-bem-linter: define toolbar
 .mdc-toolbar {
-  @include mdc-theme-prop(background-color, primary);
-  @include mdc-theme-prop(color, text-primary-on-primary);
+  @include mdc-toolbar-fill-color-accessible(primary);
 
   display: flex;
   position: relative;
@@ -86,12 +85,10 @@
   }
 
   &__icon {
-    @include mdc-shared-icon-style;
-    @include mdc-theme-prop(color, text-primary-on-primary);
+    @include mdc-toolbar-icon_;
 
     padding-right: $mdc-toolbar-element-horizontal-padding-desktop / 2;
     padding-left: $mdc-toolbar-element-horizontal-padding-desktop / 2;
-    cursor: pointer;
   }
 
   &__icon:last-of-type {
@@ -99,12 +96,10 @@
   }
 
   &__menu-icon {
-    @include mdc-shared-icon-style;
-    @include mdc-theme-prop(color, text-primary-on-primary);
+    @include mdc-toolbar-icon_;
 
     padding-right: $mdc-toolbar-element-horizontal-padding-desktop;
     padding-left: $mdc-toolbar-element-horizontal-padding-desktop;
-    cursor: pointer;
   }
 }
 
