diff --git a/core/src/components/back-button/back-button.ios.scss b/core/src/components/back-button/back-button.ios.scss
index b99a6deee5..28328b0334 100644
--- a/core/src/components/back-button/back-button.ios.scss
+++ b/core/src/components/back-button/back-button.ios.scss
@@ -35,3 +35,10 @@
   overflow: visible;
   z-index: $back-button-ios-button-z-index;
 }
+
+// Back Button States
+// --------------------------------------------------
+
+:host(.activated) .button-native {
+  opacity: .4;
+}
\ No newline at end of file
diff --git a/core/src/components/back-button/back-button.md.scss b/core/src/components/back-button/back-button.md.scss
index 61e3be6998..6e1adbde25 100644
--- a/core/src/components/back-button/back-button.md.scss
+++ b/core/src/components/back-button/back-button.md.scss
@@ -6,22 +6,24 @@
 
 :host {
   --color: #{$back-button-md-color};
-  --margin-top: 1px;
-  --margin-end: 6px;
+  --margin-top: 0;
+  --margin-end: 0;
   --margin-bottom: 0;
   --margin-start: 0;
   --padding-top: 0;
-  --padding-end: 5px;
+  --padding-end: 0;
   --padding-bottom: 0;
-  --padding-start: 5px;
+  --padding-start: 0;
   --min-height: 32px;
   --min-width: 44px;
-  --icon-padding-end: .3em;
-  --icon-padding-start: .3em;
+  --icon-padding-top: 0;
+  --icon-padding-end: 0;
+  --icon-padding-start: 0;
+  --icon-padding-bottom: 0;
   --icon-margin-top: 0;
-  --icon-margin-end: 6px;
+  --icon-margin-end: 0;
   --icon-margin-bottom: 0;
-  --icon-margin-start: 6px;
+  --icon-margin-start: 0;
   --icon-font-size: 24px;
   --icon-font-weight: normal;
 
@@ -32,6 +34,9 @@
 }
 
 .button-native {
+  width: 48px;
+  height: 48px;
+
   box-shadow: none;
 }
 
diff --git a/core/src/components/back-button/back-button.scss b/core/src/components/back-button/back-button.scss
index 47aba075f3..2c1ca5c920 100644
--- a/core/src/components/back-button/back-button.scss
+++ b/core/src/components/back-button/back-button.scss
@@ -77,10 +77,6 @@
 // Back Button States
 // --------------------------------------------------
 
-:host(.activated) .button-native {
-  opacity: .4;
-}
-
 :host-context(.can-go-back > ion-header),
 :host(.show-back-button) {
   display: block;
diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx
index 811e46055c..704497c598 100644
--- a/core/src/components/back-button/back-button.tsx
+++ b/core/src/components/back-button/back-button.tsx
@@ -77,10 +77,7 @@ export class BackButton implements ComponentInterface {
     const backButtonText = this.text != null ? this.text : this.config.get('backButtonText', defaultBackButtonText);
 
     return (
-      <button
-        type="button"
-        class="button-native"
-      >
+      <button type="button" class="button-native">
         <span class="button-inner">
           {backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
           {backButtonText && <span class="button-text">{backButtonText}</span>}
diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx
index 5618293b9f..0d3166bde7 100644
--- a/core/src/components/button/button.tsx
+++ b/core/src/components/button/button.tsx
@@ -130,6 +130,30 @@ export class Button implements ComponentInterface {
     }
   }
 
+  private get hasLabel() {
+    return this.el.textContent !== null && this.el.textContent.trim() !== '';
+  }
+
+  private get hasIcon() {
+    return !!this.el.querySelector('ion-icon');
+  }
+
+  private get hasIconOnly() {
+    return this.hasIcon && !this.hasLabel;
+  }
+
+  private get rippleType() {
+    const hasClearFill = this.fill === undefined || this.fill === 'clear';
+
+    // If the button is in a toolbar, has a clear fill (which is the default)
+    // and only has an icon we use the unbounded "circular" ripple effect
+    if (hasClearFill && this.hasIconOnly && this.inToolbar) {
+      return 'unbounded';
+    }
+
+    return 'bounded';
+  }
+
   private onFocus = () => {
     this.ionFocus.emit();
   }
@@ -139,7 +163,7 @@ export class Button implements ComponentInterface {
   }
 
   hostData() {
-    const { buttonType, disabled, color, expand, shape, size, strong } = this;
+    const { buttonType, disabled, color, expand, hasIconOnly, shape, size, strong } = this;
     let fill = this.fill;
     if (fill === undefined) {
       fill = this.inToolbar ? 'clear' : 'solid';
@@ -156,6 +180,7 @@ export class Button implements ComponentInterface {
         [`${buttonType}-${fill}`]: true,
         [`${buttonType}-strong`]: strong,
 
+        'button-has-icon-only': hasIconOnly,
         'button-disabled': disabled,
         'ion-activatable': true,
         'ion-focusable': true,
@@ -183,7 +208,7 @@ export class Button implements ComponentInterface {
           <slot></slot>
           <slot name="end"></slot>
         </span>
-        {this.mode === 'md' && <ion-ripple-effect type={this.inToolbar ? 'unbounded' : 'bounded'}></ion-ripple-effect>}
+        {this.mode === 'md' && <ion-ripple-effect type={this.rippleType}></ion-ripple-effect>}
       </TagType>
     );
   }
diff --git a/core/src/components/buttons/buttons.ios.scss b/core/src/components/buttons/buttons.ios.scss
index 37b6613fb9..c64b5209bc 100644
--- a/core/src/components/buttons/buttons.ios.scss
+++ b/core/src/components/buttons/buttons.ios.scss
@@ -6,17 +6,19 @@
 // --------------------------------------------------
 
 ::slotted(*) ion-button {
-  --padding-top: 0;
-  --padding-bottom: 0;
   --padding-start: 5px;
   --padding-end: 5px;
 
+  @include margin-horizontal(2px, 2px);
+
   height: 32px;
 
   font-size: #{$toolbar-ios-button-font-size};
   font-weight: 400;
 }
 
+
+
 ::slotted(*) ion-button:not(.button-round) {
   --border-radius: #{$toolbar-ios-button-border-radius};
 }
diff --git a/core/src/components/buttons/buttons.md.scss b/core/src/components/buttons/buttons.md.scss
index 16ef447952..4adceb3f60 100644
--- a/core/src/components/buttons/buttons.md.scss
+++ b/core/src/components/buttons/buttons.md.scss
@@ -11,6 +11,8 @@
   --padding-end: 8px;
   --box-shadow: none;
 
+  @include margin-horizontal(2px, 2px);
+
   height: 32px;
 
   font-size: #{$toolbar-md-button-font-size};
@@ -54,6 +56,23 @@
 }
 
 
+// Material Design Toolbar Icon Only Clear Button
+// --------------------------------------------------
+
+::slotted(*) .button-has-icon-only.button-clear {
+  --padding-top: 12px;
+  --padding-end: 12px;
+  --padding-bottom: 12px;
+  --padding-start: 12px;
+  --border-radius: 50%;
+
+  @include margin(0);
+
+  width: 48px;
+  height: 48px;
+}
+
+
 // Material Design Toolbar Solid Button
 // --------------------------------------------------
 
diff --git a/core/src/components/buttons/buttons.scss b/core/src/components/buttons/buttons.scss
index b12ee35973..d0e30a4587 100644
--- a/core/src/components/buttons/buttons.scss
+++ b/core/src/components/buttons/buttons.scss
@@ -16,11 +16,6 @@
 ::slotted(*) ion-button {
   --padding-top: 0;
   --padding-bottom: 0;
-  --padding-start: 0;
-  --padding-end: 0;
-  --box-shadow: none;
-  --overflow: visible;
 
   @include margin(0);
-  @include margin-horizontal(2px, 2px);
 }
diff --git a/core/src/components/header/header.md.scss b/core/src/components/header/header.md.scss
index 50195718a1..300f8b6abf 100644
--- a/core/src/components/header/header.md.scss
+++ b/core/src/components/header/header.md.scss
@@ -9,14 +9,14 @@
   // performance rather than using a box-shadow. There is a
   // noticeable performance difference on older Android devices.
   @include position(null, null, -$header-md-box-shadow-height, 0);
-  @include background-position(start, 0, top, 0);
+  @include background-position(start, 0, top, -2px);
 
   position: absolute;
 
   width: 100%;
   height: $header-md-box-shadow-height;
 
-  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAIBAMAAAACWGKkAAAAFVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAASAQCkAAAAB3RSTlMFTEIzJBcOYhQUIwAAAB9JREFUCNdjEIQCBiUoYDCGAgYXKGAIhQKGNChgwAAAorMLKSCkL40AAAAASUVORK5CYII=");
+  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAHBAMAAADzDtBxAAAAD1BMVEUAAAAAAAAAAAAAAAAAAABPDueNAAAABXRSTlMUCS0gBIh/TXEAAAAaSURBVAjXYxCEAgY4UIICBmMogMsgFLtAAQCNSwXZKOdPxgAAAABJRU5ErkJggg==);
   background-repeat: repeat-x;
 
   content: "";
diff --git a/core/src/components/header/header.md.vars.scss b/core/src/components/header/header.md.vars.scss
index e3ea3cf152..3592b843a2 100644
--- a/core/src/components/header/header.md.vars.scss
+++ b/core/src/components/header/header.md.vars.scss
@@ -4,4 +4,4 @@
 // --------------------------------------------------
 
 /// @prop - Height of the header box shadow
-$header-md-box-shadow-height:                    8px !default;
+$header-md-box-shadow-height:                    5px !default;
diff --git a/core/src/components/menu-button/menu-button.md.scss b/core/src/components/menu-button/menu-button.md.scss
index 735d1f5524..6e59c47026 100644
--- a/core/src/components/menu-button/menu-button.md.scss
+++ b/core/src/components/menu-button/menu-button.md.scss
@@ -9,6 +9,11 @@
   --padding-end: 8px;
 }
 
-ion-icon {
-  font-size: 26px;
+button {
+  width: 48px;
+  height: 48px;
+}
+
+ion-icon {
+  font-size: 24px;
 }
diff --git a/core/src/components/menu-button/menu-button.scss b/core/src/components/menu-button/menu-button.scss
index b647ea2bad..fb7cbf45e9 100644
--- a/core/src/components/menu-button/menu-button.scss
+++ b/core/src/components/menu-button/menu-button.scss
@@ -67,6 +67,7 @@ ion-icon {
 // Menu Button with Color
 // --------------------------------------------------
 
+// TODO this is not used
 :host(.ion-color) .button-native {
   color: current-color(base);
 }
diff --git a/core/src/components/menu-button/menu-button.tsx b/core/src/components/menu-button/menu-button.tsx
index f229c1fbf4..928b73cce6 100644
--- a/core/src/components/menu-button/menu-button.tsx
+++ b/core/src/components/menu-button/menu-button.tsx
@@ -40,8 +40,10 @@ export class MenuButton implements ComponentInterface {
     return {
       class: {
         [`${this.mode}`]: true,
+
         'button': true,  // ion-buttons target .button
         'ion-activatable': true,
+        'ion-focusable': true
       }
     };
   }
diff --git a/core/src/components/searchbar/searchbar.md.scss b/core/src/components/searchbar/searchbar.md.scss
index 0d28bb33b5..03940951e5 100644
--- a/core/src/components/searchbar/searchbar.md.scss
+++ b/core/src/components/searchbar/searchbar.md.scss
@@ -118,5 +118,5 @@
 // -----------------------------------------
 
 :host-context(ion-toolbar) {
-  @include padding(3px);
+  @include padding(3px, 7px);
 }
diff --git a/core/src/components/title/title.scss b/core/src/components/title/title.scss
index 16f6c949cc..f54f65a788 100644
--- a/core/src/components/title/title.scss
+++ b/core/src/components/title/title.scss
@@ -41,10 +41,12 @@
 }
 
 :host(.title-md) {
-  @include padding(0, 12px);
+  @include padding(0, 20px);
 
   font-size: 20px;
   font-weight: 500;
+
+  letter-spacing: .0125em;
 }
 
 :host(.ion-color) {
diff --git a/core/src/components/toolbar/test/components/e2e.ts b/core/src/components/toolbar/test/components/e2e.ts
new file mode 100644
index 0000000000..aeba878304
--- /dev/null
+++ b/core/src/components/toolbar/test/components/e2e.ts
@@ -0,0 +1,10 @@
+import { newE2EPage } from '@stencil/core/testing';
+
+test('toolbar: scenarios', async () => {
+  const page = await newE2EPage({
+    url: '/src/components/toolbar/test/scenarios'
+  });
+
+  const compare = await page.compareScreenshot();
+  expect(compare).toMatchScreenshot();
+});
diff --git a/core/src/components/toolbar/test/components/index.html b/core/src/components/toolbar/test/components/index.html
new file mode 100644
index 0000000000..b6ba92fac3
--- /dev/null
+++ b/core/src/components/toolbar/test/components/index.html
@@ -0,0 +1,136 @@
+<!DOCTYPE html>
+<html dir="ltr">
+
+<head>
+  <meta charset="UTF-8">
+  <title>Toolbar - Components</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
+  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
+  <script src="../../../../../scripts/testing/scripts.js"></script>
+  <script src="../../../../../dist/ionic.js"></script>
+</head>
+
+<body>
+  <ion-app>
+    <ion-content id="content">
+      <!-- Left Side Menu Toggle Components -->
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Left Side Menu Toggle</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-segment color="secondary" value="second">
+          <ion-segment-button value="first">
+            Segment
+          </ion-segment-button>
+          <ion-segment-button value="second">
+            Component
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-searchbar placeholder="Searchbar..."></ion-searchbar>
+      </ion-toolbar>
+
+      <!-- Right Side Menu Toggle Components -->
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button onclick="buttonClick()">
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-title>Right Side Menu Toggle</ion-title>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-segment color="secondary" value="component">
+          <ion-segment-button value="segment">
+            Segment
+          </ion-segment-button>
+          <ion-segment-button value="component">
+            Component
+          </ion-segment-button>
+        </ion-segment>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-searchbar placeholder="Searchbar..."></ion-searchbar>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-segment value="third">
+          <ion-segment-button value="first">
+            Light
+          </ion-segment-button>
+          <ion-segment-button value="second">
+            Bar
+          </ion-segment-button>
+          <ion-segment-button value="third">
+            Segment
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="light">
+        <ion-segment color="primary" value="first">
+          <ion-segment-button value="first">
+            Light
+          </ion-segment-button>
+          <ion-segment-button value="second">
+            Bar
+          </ion-segment-button>
+          <ion-segment-button value="third">
+            Primary
+          </ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+    </ion-content>
+  </ion-app>
+</body>
+
+</html>
diff --git a/core/src/components/toolbar/test/scenarios/index.html b/core/src/components/toolbar/test/scenarios/index.html
index e20ecb7270..5f311c829a 100644
--- a/core/src/components/toolbar/test/scenarios/index.html
+++ b/core/src/components/toolbar/test/scenarios/index.html
@@ -177,62 +177,12 @@
         <ion-title>Text Only</ion-title>
       </ion-toolbar>
 
-      <ion-toolbar>
-        <ion-buttons slot="start">
-            <ion-menu-button auto-hide="false"></ion-menu-button>
-        </ion-buttons>
-        <ion-buttons slot="secondary">
-          <ion-button>
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Left side menu toggle</ion-title>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-buttons slot="primary">
-          <ion-button onclick="buttonClick()">
-            <ion-icon slot="icon-only" name="star"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-title>Right side menu toggle</ion-title>
-        <ion-buttons slot="end">
-          <ion-menu-button auto-hide="false"></ion-menu-button>
-        </ion-buttons>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-buttons slot="primary">
-          <ion-button onclick="buttonClick()">
-            <ion-icon slot="icon-only" name="search"></ion-icon>
-          </ion-button>
-        </ion-buttons>
-        <ion-segment color="secondary">
-          <ion-segment-button value="something">
-            Something
-          </ion-segment-button>
-          <ion-segment-button value="else">
-            Else
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
-
-      <ion-toolbar>
-        <ion-segment>
-          <ion-segment-button value="light">
-            Light
-          </ion-segment-button>
-          <ion-segment-button value="toolbar">
-            Toolbar
-          </ion-segment-button>
-          <ion-segment-button value="default">
-            Default Segment
-          </ion-segment-button>
-        </ion-segment>
-      </ion-toolbar>
+      <!-- iOS Toolbar -->
       <ion-toolbar mode="ios">
         <ion-title>This is an iOS toolbar</ion-title>
       </ion-toolbar>
+
+      <!-- Material Design Toolbar -->
       <ion-toolbar mode="md">
         <ion-title>This is an MD toolbar</ion-title>
       </ion-toolbar>
diff --git a/core/src/components/toolbar/test/spec/index.html b/core/src/components/toolbar/test/spec/index.html
index 511b2958c2..439b5b8dd9 100644
--- a/core/src/components/toolbar/test/spec/index.html
+++ b/core/src/components/toolbar/test/spec/index.html
@@ -1,4 +1,3 @@
-@@ -0,0 +1,59 @@
 <!DOCTYPE html>
 <html dir="ltr">
 
@@ -14,12 +13,12 @@
 
 <body>
   <ion-app>
-    <ion-header>
+    <ion-content>
       <ion-toolbar color="tertiary">
         <ion-buttons slot="start">
           <ion-menu-button auto-hide="false"></ion-menu-button>
         </ion-buttons>
-        <ion-buttons slot="secondary">
+        <ion-buttons slot="primary">
           <ion-button>
             <ion-icon slot="icon-only" name="download"></ion-icon>
           </ion-button>
@@ -33,28 +32,221 @@
 
         <ion-title>Standard</ion-title>
       </ion-toolbar>
-    </ion-header>
 
-    <ion-content id="content">
-      <div>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
-          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-      </div>
+      <ion-header>
+        <ion-toolbar color="tertiary">
+          <ion-buttons slot="start">
+            <ion-menu-button auto-hide="false"></ion-menu-button>
+          </ion-buttons>
+          <ion-buttons slot="primary">
+            <ion-button>
+              <ion-icon slot="icon-only" name="heart"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="search"></ion-icon>
+            </ion-button>
+            <ion-button>
+              <ion-icon slot="icon-only" name="more"></ion-icon>
+            </ion-button>
+          </ion-buttons>
+
+          <ion-title>Page title</ion-title>
+        </ion-toolbar>
+      </ion-header>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-button>
+            Clearing
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            Done
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title>Text</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-button>
+            Start
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            Pri
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            End
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            Sec
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon name="call"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="primary">
+          <ion-button>
+            <ion-icon name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon name="call"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-title>Slots</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-back-button default-href="#"></ion-back-button>
+        </ion-buttons>
+        <ion-buttons slot="secondary">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title>Text</ion-title>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="end">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+
+        <ion-segment>
+          <ion-segment-button checked>All</ion-segment-button>
+          <ion-segment-button>Favorites</ion-segment-button>
+        </ion-segment>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-searchbar></ion-searchbar>
+      </ion-toolbar>
+
+      <ion-toolbar color="tertiary">
+        <ion-buttons slot="start">
+          <ion-menu-button auto-hide="false"></ion-menu-button>
+        </ion-buttons>
+        <ion-buttons slot="end">
+          <ion-button>
+            <ion-icon slot="icon-only" name="star"></ion-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-progress-bar value=".4"></ion-progress-bar>
+      </ion-toolbar>
+
     </ion-content>
+
+    <style>
+      ion-toolbar {
+        margin-bottom: 10px;
+      }
+    </style>
   </ion-app>
 </body>
 
diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss
index a184f588cd..e428ee99d1 100644
--- a/core/src/components/toolbar/toolbar.ios.scss
+++ b/core/src/components/toolbar/toolbar.ios.scss
@@ -25,6 +25,15 @@
   min-width: 0;
 }
 
+
+// Toolbar: Segment
+// --------------------------------------------------
+
+:host(.toolbar-segment) {
+  --min-height: auto;
+}
+
+
 // iOS Toolbar Slot Placement
 // --------------------------------------------------
 
diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss
index 441b46f64e..1f5f528104 100644
--- a/core/src/components/toolbar/toolbar.md.scss
+++ b/core/src/components/toolbar/toolbar.md.scss
@@ -8,10 +8,10 @@
   --background: #{$toolbar-md-background};
   --color: #{$toolbar-md-color};
   --border-color: #{$toolbar-md-border-color};
-  --padding-top: 4px;
-  --padding-bottom: 4px;
-  --padding-start: 4px;
-  --padding-end: 4px;
+  --padding-top: 0;
+  --padding-bottom: 0;
+  --padding-start: 0;
+  --padding-end: 0;
   --min-height: 56px;
 }
 
@@ -27,16 +27,33 @@
   max-width: 100%;
 }
 
+
 // Toolbar: Segment
 // --------------------------------------------------
 
-:host(.toolbar-segment) {
-  --padding-top: 0;
-  --padding-bottom: 0;
-  --padding-start: 0;
-  --padding-end: 0;
+::slotted(ion-segment) {
+  min-height: var(--min-height);
 }
 
+
+// Material Design Toolbar Buttons
+// --------------------------------------------------
+
+// Style the first slot with additional margin start
+// this only ever gets added to the first start slot buttons
+::slotted(.buttons-first-slot) {
+  @include margin-horizontal(4px, null);
+}
+
+// Style the last slot with additional margin end
+// this is added to the end, primary, or secondary slot
+// whichever it finds first, and the first one it finds
+// if multiple of the same name are found
+::slotted(.buttons-last-slot) {
+  @include margin-horizontal(null, 4px);
+}
+
+
 // Material Design Toolbar Slot Placement
 // --------------------------------------------------
 
diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss
index 2cbc5afc6a..2d304d9081 100644
--- a/core/src/components/toolbar/toolbar.scss
+++ b/core/src/components/toolbar/toolbar.scss
@@ -22,10 +22,7 @@
   --opacity: 1;
 
   @include font-smoothing();
-  @include padding-horizontal(
-    var(--ion-safe-area-left),
-    var(--ion-safe-area-right)
-  );
+  @include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
 
   display: block;
 
@@ -52,12 +49,8 @@
 }
 
 .toolbar-container {
-  @include padding(
-    var(--padding-top),
-    var(--padding-end),
-    var(--padding-bottom),
-    var(--padding-start)
-  );
+  @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start));
+
   display: flex;
   position: relative;
 
@@ -99,13 +92,9 @@
 }
 
 
-// Toolbar: Segment
+// Toolbar: Progress Bar
 // --------------------------------------------------
 
-:host(.toolbar-segment) {
-  --min-height: auto;
-}
-
 ::slotted(ion-progress-bar) {
   @include position(null, 0, 0, 0);
 
diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx
index c38a33760d..32ab373d8a 100644
--- a/core/src/components/toolbar/toolbar.tsx
+++ b/core/src/components/toolbar/toolbar.tsx
@@ -37,6 +37,26 @@ export class Toolbar implements ComponentInterface {
    */
   @Prop() mode!: Mode;
 
+  componentWillLoad() {
+    const buttons = Array.from(this.el.querySelectorAll('ion-buttons'));
+
+    const firstButtons = buttons.find(button => {
+      return button.slot === 'start';
+    });
+    if (firstButtons) {
+      firstButtons.classList.add('buttons-first-slot');
+    }
+
+    const buttonsReversed = buttons.reverse();
+    const lastButtons =
+      buttonsReversed.find(button => button.slot === 'end') ||
+      buttonsReversed.find(button => button.slot === 'primary') ||
+      buttonsReversed.find(button => button.slot === 'secondary');
+    if (lastButtons) {
+      lastButtons.classList.add('buttons-last-slot');
+    }
+  }
+
   @Listen('ionStyle')
   childrenStyle(ev: CustomEvent<StyleEventDetail>) {
     ev.stopPropagation();