title: How to position badge closer to icon?
body: <p>I'm trying to make a website with the navigation layout from Material Design Lite and I want to put an icon with notifications in my navigation bar. So far I have something like this: <a href="http://codepen.io/anon/pen/qONOjP" rel="nofollow">http://codepen.io/anon/pen/qONOjP</a></p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;!-- Material Design Lite --&gt;
      &lt;script src="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.4/material.indigo-pink.min.css"&gt;
      &lt;!-- Material Design icon font --&gt;
      &lt;link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;!-- Always shows a header, even in smaller screens. --&gt;
      &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
        &lt;header class="mdl-layout__header"&gt;
          &lt;div class="mdl-layout__header-row"&gt;
            &lt;!-- Title --&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;!-- Add spacer, to align navigation to the right --&gt;
            &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
            &lt;!-- Navigation. We hide it in small screens. --&gt;
            &lt;nav class="mdl-navigation mdl-layout--large-screen-only"&gt;
              &lt;span id="notifica" data-badge="1" class="icon material-icons mdl-badge"&gt;account_box&lt;/span&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
              &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
          &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
          &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
          &lt;nav class="mdl-navigation"&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
            &lt;a class="mdl-navigation__link" href=""&gt;Link&lt;/a&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
        &lt;main class="mdl-layout__content"&gt;
          &lt;div class="page-content"&gt;&lt;!-- Your content goes here --&gt;&lt;/div&gt;
        &lt;/main&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The badge is a little too far from the account box icon. It's not like the badges in the mdl website: <a href="http://www.getmdl.io/components/index.html#badges-section" rel="nofollow">http://www.getmdl.io/components/index.html#badges-section</a></p>
  
  <p>How can I fix this?</p>