<div class="demo-preview-block"> <section class="toolbar"> <div class="toolbar"> <div class="wrapper"> <div id="el1" class="material-icons mdl-badge mdl-js-badge" data-badge="1">print</div> </div> <div class="wrapper"> <div id="el2" class="material-icons mdl-badge" data-badge="♥">cloud_upload</div> </div> <div class="wrapper"> <div id="el3" class="material-icons mdl-badge" data-badge="99">share</div> </div> </div> <p> <strong>Hint:</strong> Check your log and you'll see the values for the first badge... </p> <section class="icon-icon"> <style> .demo-badge__badge-on-icon-icon .mdl-badge { color: rgba(0, 0, 0, 0.24); } .demo-badge__badge-on-icon-icon .mdl-badge.material-icons { font-size: 32px; } </style> <div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div> <p>Icon on badge</p> </section> <section class="icon-text"> <style> .demo-badge__badge-on-icon-text .mdl-badge { color: rgba(0, 0, 0, 0.24); } .demo-badge__badge-on-icon-text .mdl-badge.material-icons { font-size: 32px; } </style> <div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div> <p>Number badge on icon</p> </section> <section class="text"> <h5>Text</h5> <span class="mdl-badge" data-badge="42">I am in a span</span> <span class="mdl-badge" data-badge="!">Me too</span> <div class="mdl-badge" data-badge="99">I am in a div, but that makes no sense here</div> <span class="mdl-badge">I have <strong>no</strong> data-badge!</span> <span class="mdl-badge" data-badge="88">But I have one</span> <p style="margin-top: 1em">Right margin is set <strong>automatically</strong>, top margin is left to you - it depends too much on the situation</p> </section> <section class="links"> <h5>Links</h5> <a href="#" class="mdl-badge" data-badge="10">Hello</a> <a href="#" class="mdl-badge" data-badge="1">Hello</a> <a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a> <div class="dark"> <a href="#" class="mdl-badge" data-badge="1">Simulate header</a> <a href="#" class="mdl-badge mdl-badge--no-background" data-badge="1">no background</a> </div> </section> </div> </section>