title: chip inside toolbar incorrect vertical alignment
body: <h3>Problem description</h3>
  
  <p>I am trying to put a chip inside a toolbar and am having problems with vertical alignment. I can fix it with overriding some styles of course, but as a real beginner I assume I'm doing something wrong i.e. not using the material-ui components in the right way?</p>
  
  <h3>Steps to reproduce</h3>
  
  <p>If I put a chip as a direct child of an appbar the chips fills the whole height incorrectly:
  <a href="http://i.imgur.com/2mHKaIV.png" rel="nofollow">http://i.imgur.com/2mHKaIV.png</a></p>
  
  <p><code>
      render() {
          return (
          &lt;Toolbar&gt;
              &lt;Chip&gt;
                  &lt;Avatar icon={&lt;AccountCircleIcon /&gt;} /&gt;
                  Not signed in
              &lt;/Chip&gt;
          &lt;/Toolbar&gt;
          )
      }
  </code></p>
  
  <p>If I wrap it in a list item it's height is correct but it still isn't centered in the toolbar:
  <a href="http://i.imgur.com/Ksc5CTd.png" rel="nofollow">http://i.imgur.com/Ksc5CTd.png</a></p>
  
  <p><code>
      render() {
          return (
          &lt;Toolbar&gt;
              &lt;ListItem disabled={true}&gt;
                  &lt;Chip&gt;
                      &lt;Avatar icon={&lt;AccountCircleIcon /&gt;} /&gt;
                      Not signed in
                  &lt;/Chip&gt;
              &lt;/ListItem&gt;
          &lt;/Toolbar&gt;
          )
  </code></p>
  
  <p>What am I doing wrong?
  (naturally I want it vertically centered in the toolbar and of the correct height for a chip)</p>
  
  <h3>Versions</h3>
  
  <ul>
  <li>Material-UI: 0.15.4</li>
  <li>React: 15.3.2</li>
  <li>Browser: Chrome  53.0.2785.116 (Mac OSX)</li>
  </ul>