<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    
   <section>
     
      <!-- Number badge -->
      <div class="material-label mdl-badge" data-badge="4">Inbox</div>
      <!-- Icon badge on icon -->
      <div class="icon material-icons mdl-badge" data-badge="♥">account_box</div>
     
    </section>
    
  </body>
</html>
body {
  background: #fafafa;
  padding: 40px 0 0;
}

/* use section to lay out flex items */
section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.material-icons.icon,
.material-label {
  font-size: 3em;
  line-height: 1;
  display: block;
  color: #424242;
  margin: .5em 0
}


.material-icons.mdl-badge[data-badge]::after,
.material-label.mdl-badge[data-badge]::after{
  font-size: .3em;
  width: 2em;
  height: 2em;
}

.material-icons.mdl-badge[data-badge]::after {
  top: -1em;
  right: -1em;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.