Fixed #696 - Button Icon/Inner Alignment

Button content was improperly being aligned due to the misleading nature of how vertical-align: middle works. Added a visual segment to the spec so it can be acceptance tested by developers.

components/button/theme.scss

@@ -31,14 +31,14 @@
   > span:not([data-react-toolbox="tooltip"]) {
     display: inline-block;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > svg {
     display: inline-block;
     width: 1em;
     height: $button-height;
     font-size: 120%;
-    vertical-align: middle;
+    vertical-align: top;
     fill: currentColor;
   }
   > * {
@@ -126,7 +126,7 @@
   > .icon, svg {
     font-size: $button-toggle-font-size;
     line-height: $button-height;
-    vertical-align: middle;
+    vertical-align: top;
   }
   > .rippleWrapper {
     border-radius: 50%;

spec/components/button.js

@@ -24,6 +24,17 @@ const ButtonTest = () => (
     <IconButton primary><GithubIcon/></IconButton>
     <Button icon='add' label='Add this' flat primary />
     <Button icon='add' label='Add this' flat disabled />
+    <h5>Icon Button Alignment</h5>
+    <p>
+      Icon Buttons should align in the vertical center, to see this we need to
+      put them next to text or highlight thier background color.
+    </p>
+    <IconButton icon='menu' style={{'background-color': 'red'}} inverse />
+    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <IconButton icon='menu' />
+    <span style={{'vertical-align': 'middle'}}>Menu</span>
+    <IconButton><GithubIcon /></IconButton>
+    <span style={{'vertical-align': 'middle'}}>Github</span>
   </section>
 );