import 'package:mdl/mdl.dart';

main() {
    final Logger _logger = new Logger('main.MaterialBadge');
    registerMdl();
    componentFactory().run().then((_) {
        final MaterialBadge badge1 = MaterialBadge.widget(dom.querySelector("#el1"));
        int counter = 1;
        new Timer.periodic(new Duration(milliseconds: 100), (_) {
            if(counter > 999) {
                counter = 1;
            }
            badge1.value = counter.toString();
            _logger.info("Current Badge-Value: ${badge1.value}");
            counter++;
        });
    });
}
To use any MDL component, you must include the minified CSS file in the <head> section of the page:
More about theming...
<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="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>

badge

...will be here soon