diff --git a/src/demo-app/button/button-demo.html b/src/demo-app/button/button-demo.html
index e8d9b17ae78e..5fb68da3df3c 100644
--- a/src/demo-app/button/button-demo.html
+++ b/src/demo-app/button/button-demo.html
@@ -89,4 +89,16 @@
     <a href="http://www.google.com" md-raised-button color="primary">SEARCH</a>
     <button md-raised-button>DANCE</button>
   </section>
+  <section>
+    <button md-raised-button>More<md-icon>more_vert</md-icon></button>
+    <button md-raised-button>Check<md-icon>check</md-icon></button>
+    <button md-raised-button>Check<md-icon class="md-24">favorite</md-icon></button>
+    <button md-raised-button>Last<md-icon>navigate_before</md-icon></button>
+  </section>
+  <section>
+    <button md-button>More<md-icon>more_vert</md-icon></button>
+    <button md-button>Check<md-icon>check</md-icon></button>
+    <button md-button>Check<md-icon class="md-24">favorite</md-icon></button>
+    <button md-button>Last<md-icon>navigate_before</md-icon></button>
+  </section>
 </div>
diff --git a/src/lib/button/button.scss b/src/lib/button/button.scss
index 5f1a78b4755c..6ac83e421285 100644
--- a/src/lib/button/button.scss
+++ b/src/lib/button/button.scss
@@ -47,6 +47,13 @@
   }
 }
 
+// The text and icon should be vertical aligned inside a button
+[md-button], [md-raised-button] {
+  .md-button-wrapper > * {
+    vertical-align: middle;
+  }
+}
+
 // The ripple container should match the bounds of the entire button.
 .md-button-ripple {
   position: absolute;