diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-icon-demo.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-icon-demo.html
new file mode 100644
index 0000000..1baa6ff
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-icon-demo.html
@@ -0,0 +1,9 @@
+<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>
+{% include "badge-on-icon-icon.html" %}
diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-icon.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-icon.html
new file mode 100644
index 0000000..3b23967
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-icon.html
@@ -0,0 +1,2 @@
+<!-- Icon badge on icon -->
+<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="♥">account_box</div>
diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-text-demo.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-text-demo.html
new file mode 100644
index 0000000..1437ef8
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-text-demo.html
@@ -0,0 +1,9 @@
+<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>
+{% include "badge-on-icon-text.html" %}
diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-text.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-text.html
new file mode 100644
index 0000000..e73a9f2
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-icon-text.html
@@ -0,0 +1,2 @@
+<!-- Number badge on icon -->
+<div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1">account_box</div>
diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-text-icon-demo.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-icon-demo.html
new file mode 100644
index 0000000..57ab2bf
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-icon-demo.html
@@ -0,0 +1,6 @@
+<style>
+.demo-badge__badge-on-text-icon .mdl-badge {
+  color: rgba(0, 0, 0, 0.24);
+}
+</style>
+{% include "badge-on-text-icon.html" %}
diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-text-icon.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-icon.html
new file mode 100644
index 0000000..86c1240
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-icon.html
@@ -0,0 +1,2 @@
+<!-- Icon badge -->
+<span class="mdl-badge" data-badge="♥">Mood</span>
diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-text-text-demo.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-text-demo.html
new file mode 100644
index 0000000..37d26e1
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-text-demo.html
@@ -0,0 +1,7 @@
+<style>
+.demo-badge__badge-on-text-text .mdl-badge {
+  color: rgba(0, 0, 0, 0.24);
+}
+</style>
+
+{% include "badge-on-text-text.html" %}
diff --git a/node_modules/material-design-lite/src/badge/snippets/badge-on-text-text.html b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-text.html
new file mode 100644
index 0000000..d2f66eb
--- /dev/null
+++ b/node_modules/material-design-lite/src/badge/snippets/badge-on-text-text.html
@@ -0,0 +1,2 @@
+<!-- Number badge -->
+<span class="mdl-badge" data-badge="4">Inbox</span>