title: Notifications badge not taking up left position when changing direction to RTL
body: <p>I have an issue in my code where RTL works everywhere except for notifications badges that always stays in the right top only</p>
  
  <p><a href="https://jsfiddle.net/t54xsrvq/" rel="nofollow noreferrer">https://jsfiddle.net/t54xsrvq/</a></p>
  
  <p>It works fine in the demo in 
  <a href="https://material-ui.com/components/badges/#api" rel="nofollow noreferrer">https://material-ui.com/components/badges/#api</a></p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" dir="rtl"&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 --&gt;
          &lt;div class="material-icons mdl-badge mdl-badge--overlap btn-badge" data-badge="5"&gt;
              &lt;div class="mdl-button mdl-js-button mdl-button--icon mdl-button--notifications" &gt;
                &lt;i class="material-icons"&gt;notifications&lt;/i&gt;
              &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/header&gt;
  .
  .
  .
  &lt;/div&gt;
  </code></pre>
  
  <p>What is wrong here?</p>