: class="material-icons mdl-badge mdl-badge--overlap"
Badge: class="mdl-badge", **the material-icons makes the text bigger, and mdl-badge--overlap makes badge overlap the text**
[Badge](#): Badge in the inlink
[Badge](#): Badge outside the link
[Badge](#): Badge with too many characters(12345)
[Badge](#): class="mdl-badge mdl-badge--no-background"
<!-- Number badge on icon -->
<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">Badge</div>: class="material-icons mdl-badge mdl-badge--overlap"<br>
<span class="mdl-badge" data-badge="2">Badge</span>: class="mdl-badge", <strong>the material-icons makes the text bigger, and mdl-badge--overlap makes badge overlap the text</strong><br>
<a href="#" class="mdl-badge" data-badge="3">Badge</a>: Badge in the inlink<br>
<a href="#">Badge</a><span class="mdl-badge" data-badge="4"></span>: Badge outside the link<br>
<a href="#" class="mdl-badge" data-badge="12345">Badge</a>: Badge with too many characters(12345)<br>
<a href="#" class="mdl-badge mdl-badge--no-background" data-badge="6">Badge</a>: class="mdl-badge mdl-badge--no-background"
