I have an issue in my code where RTL works everywhere except for notifications badges that always stays in the right top only
https://jsfiddle.net/t54xsrvq/
It works fine in the demo in https://material-ui.com/components/badges/#api
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header" dir="rtl">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- Title -->
<span class="mdl-layout-title">Title</span>
<!-- Add spacer, to align navigation to the right -->
<div class="mdl-layout-spacer"></div>
<!-- Navigation -->
<div class="material-icons mdl-badge mdl-badge--overlap btn-badge" data-badge="5">
<div class="mdl-button mdl-js-button mdl-button--icon mdl-button--notifications" >
<i class="material-icons">notifications</i>
</div>
</div>
</div>
</header>
.
.
.
</div>
What is wrong here?
