From 9ec23acadefe6984147d2009c5fcf8b0bace3882 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Thu, 22 Dec 2016 14:06:40 -0800
Subject: [PATCH 1/2] regen filkes

---
 .../snack-bar-component-example-snack.css.html |  4 ++--
 ...snack-bar-component-example-snack.html.html |  4 +++-
 .../snack-bar-component-example.ts.html        | 18 +++++++++---------
 .../snack-bar-overview-example.ts.html         |  4 +++-
 4 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/assets/examples/snack-bar-component-example-snack.css.html b/src/assets/examples/snack-bar-component-example-snack.css.html
index bb801280d..71fc7b41d 100644
--- a/src/assets/examples/snack-bar-component-example-snack.css.html
+++ b/src/assets/examples/snack-bar-component-example-snack.css.html
@@ -1,3 +1,3 @@
-<span class="hljs-selector-class">.example-snack</span> {
-  <span class="hljs-attribute">color</span>: <span class="hljs-number">#0f0</span>;
+<span class="hljs-selector-class">.example-pizza-party</span> {
+  <span class="hljs-attribute">color</span>: hotpink;
 }
diff --git a/src/assets/examples/snack-bar-component-example-snack.html.html b/src/assets/examples/snack-bar-component-example-snack.html.html
index 929629614..3c9a73811 100644
--- a/src/assets/examples/snack-bar-component-example-snack.html.html
+++ b/src/assets/examples/snack-bar-component-example-snack.html.html
@@ -1 +1,3 @@
-I'm a custom component... in a snack bar.
+<span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"example-pizza-party"</span>&gt;</span>
+  🍕🍕🍕🍕🍕 Pizza party!!! 🍕🍕🍕🍕🍕
+<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
diff --git a/src/assets/examples/snack-bar-component-example.ts.html b/src/assets/examples/snack-bar-component-example.ts.html
index 216d3ec89..792b700f5 100644
--- a/src/assets/examples/snack-bar-component-example.ts.html
+++ b/src/assets/examples/snack-bar-component-example.ts.html
@@ -1,14 +1,18 @@
-<span class="hljs-keyword">import</span> {Component, ViewEncapsulation} from <span class="hljs-string">'@angular/core'</span>;
+<span class="hljs-keyword">import</span> {Component} from <span class="hljs-string">'@angular/core'</span>;
 <span class="hljs-keyword">import</span> {MdSnackBar} from <span class="hljs-string">'@angular/material'</span>;
 
 
 <span class="hljs-meta">@Component</span>({
   selector: <span class="hljs-string">'snack-bar-component-example'</span>,
-  template: <span class="hljs-string">''</span>,
+  templateUrl: <span class="hljs-string">'./snack-bar-component-example.html'</span>,
 })
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SnackBarComponentExample {
-  <span class="hljs-keyword">constructor</span>(<span class="hljs-params">snackBar: MdSnackBar</span>) {
-    snackBar.openFromComponent(SnackBarComponentExampleSnack);
+  <span class="hljs-keyword">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> snackBar: MdSnackBar</span>) {}
+
+  openSnackBar() {
+    <span class="hljs-keyword">this</span>.snackBar.openFromComponent(PizzaPartyComponent, {
+      duration: <span class="hljs-number">500</span>,
+    });
   }
 }
 
@@ -17,9 +21,5 @@
   selector: <span class="hljs-string">'snack-bar-component-example-snack'</span>,
   templateUrl: <span class="hljs-string">'./snack-bar-component-example-snack.html'</span>,
   styleUrls: [<span class="hljs-string">'./snack-bar-component-example-snack.css'</span>],
-  host: {
-    <span class="hljs-string">'class'</span>: <span class="hljs-string">'example-snack'</span>,
-  },
-  encapsulation: ViewEncapsulation.None,
 })
-<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> SnackBarComponentExampleSnack {}
+<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> PizzaPartyComponent {}
diff --git a/src/assets/examples/snack-bar-overview-example.ts.html b/src/assets/examples/snack-bar-overview-example.ts.html
index b270e9f1b..e0181ff80 100644
--- a/src/assets/examples/snack-bar-overview-example.ts.html
+++ b/src/assets/examples/snack-bar-overview-example.ts.html
@@ -10,6 +10,8 @@
   <span class="hljs-keyword">constructor</span>(<span class="hljs-params"><span class="hljs-keyword">public</span> snackBar: MdSnackBar</span>) {}
 
   openSnackBar(message: <span class="hljs-built_in">string</span>, action: <span class="hljs-built_in">string</span>) {
-    <span class="hljs-keyword">this</span>.snackBar.open(message, action);
+    <span class="hljs-keyword">this</span>.snackBar.open(message, action, {
+      duration: <span class="hljs-number">2000</span>,
+    });
   }
 }

From 507a4b3eabd1903b3c7f439fb4409387eb4ebc46 Mon Sep 17 00:00:00 2001
From: Jeremy Elbourn <jelbourn@google.com>
Date: Thu, 22 Dec 2016 14:45:52 -0800
Subject: [PATCH 2/2] Fix firebase not loading example sources

---
 src/app/shared/example-viewer/example-viewer.ts      |  2 +-
 src/assets/documents/overview/icon.html              |  2 +-
 ...ple.css.html => button-overview-example-css.html} |  0
 ...e.html.html => button-overview-example-html.html} |  0
 ...ample.ts.html => button-overview-example-ts.html} |  0
 ...html => button-toggle-exclusive-example-css.html} |  0
 ...tml => button-toggle-exclusive-example-html.html} |  0
 ....html => button-toggle-exclusive-example-ts.html} |  0
 ....html => button-toggle-overview-example-css.html} |  0
 ...html => button-toggle-overview-example-html.html} |  0
 ...s.html => button-toggle-overview-example-ts.html} |  0
 ...xample.css.html => button-types-example-css.html} |  0
 ...mple.html.html => button-types-example-html.html} |  0
 ...-example.ts.html => button-types-example-ts.html} |  0
 ...-example.css.html => card-fancy-example-css.html} |  0
 ...xample.html.html => card-fancy-example-html.html} |  0
 ...cy-example.ts.html => card-fancy-example-ts.html} |  0
 ...ample.css.html => card-overview-example-css.html} |  0
 ...ple.html.html => card-overview-example-html.html} |  0
 ...example.ts.html => card-overview-example-ts.html} |  0
 ...s.html => checkbox-configurable-example-css.html} |  0
 ....html => checkbox-configurable-example-html.html} |  0
 ...ts.html => checkbox-configurable-example-ts.html} |  0
 ...e.css.html => checkbox-overview-example-css.html} |  0
 ...html.html => checkbox-overview-example-html.html} |  0
 ...ple.ts.html => checkbox-overview-example-ts.html} |  0
 ...mple.css.html => chips-overview-example-css.html} |  0
 ...le.html.html => chips-overview-example-html.html} |  0
 ...xample.ts.html => chips-overview-example-ts.html} |  0
 ...ample.css.html => chips-stacked-example-css.html} |  0
 ...ple.html.html => chips-stacked-example-html.html} |  0
 ...example.ts.html => chips-stacked-example-ts.html} |  0
 ...ple.css.html => dialog-overview-example-css.html} |  0
 ...html => dialog-overview-example-dialog-html.html} |  0
 ...e.html.html => dialog-overview-example-html.html} |  0
 ...ample.ts.html => dialog-overview-example-ts.html} |  0
 ...ample.css.html => dialog-result-example-css.html} |  0
 ...l.html => dialog-result-example-dialog-html.html} |  0
 ...ple.html.html => dialog-result-example-html.html} |  0
 ...example.ts.html => dialog-result-example-ts.html} |  0
 ...e.css.html => grid-list-dynamic-example-css.html} |  0
 ...html.html => grid-list-dynamic-example-html.html} |  0
 ...ple.ts.html => grid-list-dynamic-example-ts.html} |  0
 ....css.html => grid-list-overview-example-css.html} |  0
 ...tml.html => grid-list-overview-example-html.html} |  0
 ...le.ts.html => grid-list-overview-example-ts.html} |  0
 ...ample.css.html => icon-overview-example-css.html} |  0
 ...ple.html.html => icon-overview-example-html.html} |  0
 ...example.ts.html => icon-overview-example-ts.html} |  0
 ...vg-example.css.html => icon-svg-example-css.html} |  0
 ...-example.html.html => icon-svg-example-html.html} |  0
 ...-svg-example.ts.html => icon-svg-example-ts.html} |  0
 ...-example.css.html => input-form-example-css.html} |  0
 ...xample.html.html => input-form-example-html.html} |  0
 ...rm-example.ts.html => input-form-example-ts.html} |  0
 ...mple.css.html => input-overview-example-css.html} |  0
 ...le.html.html => input-overview-example-html.html} |  0
 ...xample.ts.html => input-overview-example-ts.html} |  0
 ...ample.css.html => list-overview-example-css.html} |  0
 ...ple.html.html => list-overview-example-html.html} |  0
 ...example.ts.html => list-overview-example-ts.html} |  0
 ...ample.css.html => list-sections-example-css.html} |  0
 ...ple.html.html => list-sections-example-html.html} |  0
 ...example.ts.html => list-sections-example-ts.html} |  0
 ...-example.css.html => menu-icons-example-css.html} |  0
 ...xample.html.html => menu-icons-example-html.html} |  0
 ...ns-example.ts.html => menu-icons-example-ts.html} |  0
 ...ample.css.html => menu-overview-example-css.html} |  0
 ...ple.html.html => menu-overview-example-html.html} |  0
 ...example.ts.html => menu-overview-example-ts.html} |  0
 ...ml => progress-bar-configurable-example-css.html} |  0
 ...l => progress-bar-configurable-example-html.html} |  0
 ...tml => progress-bar-configurable-example-ts.html} |  0
 ...s.html => progress-bar-overview-example-css.html} |  0
 ....html => progress-bar-overview-example-html.html} |  0
 ...ts.html => progress-bar-overview-example-ts.html} |  0
 ...=> progress-circle-configurable-example-css.html} |  0
 ...> progress-circle-configurable-example-html.html} |  0
 ... => progress-circle-configurable-example-ts.html} |  0
 ...tml => progress-circle-overview-example-css.html} |  0
 ...ml => progress-circle-overview-example-html.html} |  0
 ...html => progress-circle-overview-example-ts.html} |  0
 ...mple.css.html => radio-ng-model-example-css.html} |  0
 ...le.html.html => radio-ng-model-example-html.html} |  0
 ...xample.ts.html => radio-ng-model-example-ts.html} |  6 +++---
 ...mple.css.html => radio-overview-example-css.html} |  0
 ...le.html.html => radio-overview-example-html.html} |  0
 ...xample.ts.html => radio-overview-example-ts.html} |  0
 ...example.css.html => select-form-example-css.html} |  0
 ...ample.html.html => select-form-example-html.html} |  0
 ...m-example.ts.html => select-form-example-ts.html} |  0
 ...ple.css.html => select-overview-example-css.html} |  0
 ...e.html.html => select-overview-example-html.html} |  0
 ...ample.ts.html => select-overview-example-ts.html} |  0
 ...example.css.html => sidenav-fab-example-css.html} |  0
 ...ample.html.html => sidenav-fab-example-html.html} |  0
 ...b-example.ts.html => sidenav-fab-example-ts.html} |  0
 ...le.css.html => sidenav-overview-example-css.html} |  0
 ....html.html => sidenav-overview-example-html.html} |  0
 ...mple.ts.html => sidenav-overview-example-ts.html} |  0
 ...ml => slide-toggle-configurable-example-css.html} |  0
 ...l => slide-toggle-configurable-example-html.html} |  0
 ...tml => slide-toggle-configurable-example-ts.html} |  0
 ...s.html => slide-toggle-overview-example-css.html} |  0
 ....html => slide-toggle-overview-example-html.html} |  0
 ...ts.html => slide-toggle-overview-example-ts.html} |  0
 ...css.html => slider-configurable-example-css.html} |  0
 ...ml.html => slider-configurable-example-html.html} |  0
 ...e.ts.html => slider-configurable-example-ts.html} |  0
 ...ple.css.html => slider-overview-example-css.html} |  0
 ...e.html.html => slider-overview-example-html.html} |  0
 ...ample.ts.html => slider-overview-example-ts.html} |  0
 .../examples/snack-bar-component-example-html.html   |  3 +++
 ...ml => snack-bar-component-example-snack-css.html} |  0
 ...l => snack-bar-component-example-snack-html.html} |  0
 ...e.ts.html => snack-bar-component-example-ts.html} |  0
 ....css.html => snack-bar-overview-example-css.html} |  0
 ...tml.html => snack-bar-overview-example-html.html} |  0
 ...le.ts.html => snack-bar-overview-example-ts.html} |  0
 ...ample.css.html => tabs-overview-example-css.html} |  0
 ...ple.html.html => tabs-overview-example-html.html} |  0
 ...example.ts.html => tabs-overview-example-ts.html} |  0
 ...css.html => tabs-template-label-example-css.html} |  0
 ...ml.html => tabs-template-label-example-html.html} |  0
 ...e.ts.html => tabs-template-label-example-ts.html} |  0
 ...le.css.html => toolbar-multirow-example-css.html} |  0
 ....html.html => toolbar-multirow-example-html.html} |  0
 ...mple.ts.html => toolbar-multirow-example-ts.html} |  0
 ...le.css.html => toolbar-overview-example-css.html} |  0
 ....html.html => toolbar-overview-example-html.html} |  0
 ...mple.ts.html => toolbar-overview-example-ts.html} |  0
 ...le.css.html => tooltip-overview-example-css.html} |  0
 ....html.html => tooltip-overview-example-html.html} |  0
 ...mple.ts.html => tooltip-overview-example-ts.html} |  0
 ...le.css.html => tooltip-position-example-css.html} |  0
 ....html.html => tooltip-position-example-html.html} |  0
 ...mple.ts.html => tooltip-position-example-ts.html} |  0
 tools/highlight-examples.sh                          |  2 +-
 tools/syntax-highlight.js                            | 12 +++++++++---
 139 files changed, 18 insertions(+), 9 deletions(-)
 rename src/assets/examples/{button-overview-example.css.html => button-overview-example-css.html} (100%)
 rename src/assets/examples/{button-overview-example.html.html => button-overview-example-html.html} (100%)
 rename src/assets/examples/{button-overview-example.ts.html => button-overview-example-ts.html} (100%)
 rename src/assets/examples/{button-toggle-exclusive-example.css.html => button-toggle-exclusive-example-css.html} (100%)
 rename src/assets/examples/{button-toggle-exclusive-example.html.html => button-toggle-exclusive-example-html.html} (100%)
 rename src/assets/examples/{button-toggle-exclusive-example.ts.html => button-toggle-exclusive-example-ts.html} (100%)
 rename src/assets/examples/{button-toggle-overview-example.css.html => button-toggle-overview-example-css.html} (100%)
 rename src/assets/examples/{button-toggle-overview-example.html.html => button-toggle-overview-example-html.html} (100%)
 rename src/assets/examples/{button-toggle-overview-example.ts.html => button-toggle-overview-example-ts.html} (100%)
 rename src/assets/examples/{button-types-example.css.html => button-types-example-css.html} (100%)
 rename src/assets/examples/{button-types-example.html.html => button-types-example-html.html} (100%)
 rename src/assets/examples/{button-types-example.ts.html => button-types-example-ts.html} (100%)
 rename src/assets/examples/{card-fancy-example.css.html => card-fancy-example-css.html} (100%)
 rename src/assets/examples/{card-fancy-example.html.html => card-fancy-example-html.html} (100%)
 rename src/assets/examples/{card-fancy-example.ts.html => card-fancy-example-ts.html} (100%)
 rename src/assets/examples/{card-overview-example.css.html => card-overview-example-css.html} (100%)
 rename src/assets/examples/{card-overview-example.html.html => card-overview-example-html.html} (100%)
 rename src/assets/examples/{card-overview-example.ts.html => card-overview-example-ts.html} (100%)
 rename src/assets/examples/{checkbox-configurable-example.css.html => checkbox-configurable-example-css.html} (100%)
 rename src/assets/examples/{checkbox-configurable-example.html.html => checkbox-configurable-example-html.html} (100%)
 rename src/assets/examples/{checkbox-configurable-example.ts.html => checkbox-configurable-example-ts.html} (100%)
 rename src/assets/examples/{checkbox-overview-example.css.html => checkbox-overview-example-css.html} (100%)
 rename src/assets/examples/{checkbox-overview-example.html.html => checkbox-overview-example-html.html} (100%)
 rename src/assets/examples/{checkbox-overview-example.ts.html => checkbox-overview-example-ts.html} (100%)
 rename src/assets/examples/{chips-overview-example.css.html => chips-overview-example-css.html} (100%)
 rename src/assets/examples/{chips-overview-example.html.html => chips-overview-example-html.html} (100%)
 rename src/assets/examples/{chips-overview-example.ts.html => chips-overview-example-ts.html} (100%)
 rename src/assets/examples/{chips-stacked-example.css.html => chips-stacked-example-css.html} (100%)
 rename src/assets/examples/{chips-stacked-example.html.html => chips-stacked-example-html.html} (100%)
 rename src/assets/examples/{chips-stacked-example.ts.html => chips-stacked-example-ts.html} (100%)
 rename src/assets/examples/{dialog-overview-example.css.html => dialog-overview-example-css.html} (100%)
 rename src/assets/examples/{dialog-overview-example-dialog.html.html => dialog-overview-example-dialog-html.html} (100%)
 rename src/assets/examples/{dialog-overview-example.html.html => dialog-overview-example-html.html} (100%)
 rename src/assets/examples/{dialog-overview-example.ts.html => dialog-overview-example-ts.html} (100%)
 rename src/assets/examples/{dialog-result-example.css.html => dialog-result-example-css.html} (100%)
 rename src/assets/examples/{dialog-result-example-dialog.html.html => dialog-result-example-dialog-html.html} (100%)
 rename src/assets/examples/{dialog-result-example.html.html => dialog-result-example-html.html} (100%)
 rename src/assets/examples/{dialog-result-example.ts.html => dialog-result-example-ts.html} (100%)
 rename src/assets/examples/{grid-list-dynamic-example.css.html => grid-list-dynamic-example-css.html} (100%)
 rename src/assets/examples/{grid-list-dynamic-example.html.html => grid-list-dynamic-example-html.html} (100%)
 rename src/assets/examples/{grid-list-dynamic-example.ts.html => grid-list-dynamic-example-ts.html} (100%)
 rename src/assets/examples/{grid-list-overview-example.css.html => grid-list-overview-example-css.html} (100%)
 rename src/assets/examples/{grid-list-overview-example.html.html => grid-list-overview-example-html.html} (100%)
 rename src/assets/examples/{grid-list-overview-example.ts.html => grid-list-overview-example-ts.html} (100%)
 rename src/assets/examples/{icon-overview-example.css.html => icon-overview-example-css.html} (100%)
 rename src/assets/examples/{icon-overview-example.html.html => icon-overview-example-html.html} (100%)
 rename src/assets/examples/{icon-overview-example.ts.html => icon-overview-example-ts.html} (100%)
 rename src/assets/examples/{icon-svg-example.css.html => icon-svg-example-css.html} (100%)
 rename src/assets/examples/{icon-svg-example.html.html => icon-svg-example-html.html} (100%)
 rename src/assets/examples/{icon-svg-example.ts.html => icon-svg-example-ts.html} (100%)
 rename src/assets/examples/{input-form-example.css.html => input-form-example-css.html} (100%)
 rename src/assets/examples/{input-form-example.html.html => input-form-example-html.html} (100%)
 rename src/assets/examples/{input-form-example.ts.html => input-form-example-ts.html} (100%)
 rename src/assets/examples/{input-overview-example.css.html => input-overview-example-css.html} (100%)
 rename src/assets/examples/{input-overview-example.html.html => input-overview-example-html.html} (100%)
 rename src/assets/examples/{input-overview-example.ts.html => input-overview-example-ts.html} (100%)
 rename src/assets/examples/{list-overview-example.css.html => list-overview-example-css.html} (100%)
 rename src/assets/examples/{list-overview-example.html.html => list-overview-example-html.html} (100%)
 rename src/assets/examples/{list-overview-example.ts.html => list-overview-example-ts.html} (100%)
 rename src/assets/examples/{list-sections-example.css.html => list-sections-example-css.html} (100%)
 rename src/assets/examples/{list-sections-example.html.html => list-sections-example-html.html} (100%)
 rename src/assets/examples/{list-sections-example.ts.html => list-sections-example-ts.html} (100%)
 rename src/assets/examples/{menu-icons-example.css.html => menu-icons-example-css.html} (100%)
 rename src/assets/examples/{menu-icons-example.html.html => menu-icons-example-html.html} (100%)
 rename src/assets/examples/{menu-icons-example.ts.html => menu-icons-example-ts.html} (100%)
 rename src/assets/examples/{menu-overview-example.css.html => menu-overview-example-css.html} (100%)
 rename src/assets/examples/{menu-overview-example.html.html => menu-overview-example-html.html} (100%)
 rename src/assets/examples/{menu-overview-example.ts.html => menu-overview-example-ts.html} (100%)
 rename src/assets/examples/{progress-bar-configurable-example.css.html => progress-bar-configurable-example-css.html} (100%)
 rename src/assets/examples/{progress-bar-configurable-example.html.html => progress-bar-configurable-example-html.html} (100%)
 rename src/assets/examples/{progress-bar-configurable-example.ts.html => progress-bar-configurable-example-ts.html} (100%)
 rename src/assets/examples/{progress-bar-overview-example.css.html => progress-bar-overview-example-css.html} (100%)
 rename src/assets/examples/{progress-bar-overview-example.html.html => progress-bar-overview-example-html.html} (100%)
 rename src/assets/examples/{progress-bar-overview-example.ts.html => progress-bar-overview-example-ts.html} (100%)
 rename src/assets/examples/{progress-circle-configurable-example.css.html => progress-circle-configurable-example-css.html} (100%)
 rename src/assets/examples/{progress-circle-configurable-example.html.html => progress-circle-configurable-example-html.html} (100%)
 rename src/assets/examples/{progress-circle-configurable-example.ts.html => progress-circle-configurable-example-ts.html} (100%)
 rename src/assets/examples/{progress-circle-overview-example.css.html => progress-circle-overview-example-css.html} (100%)
 rename src/assets/examples/{progress-circle-overview-example.html.html => progress-circle-overview-example-html.html} (100%)
 rename src/assets/examples/{progress-circle-overview-example.ts.html => progress-circle-overview-example-ts.html} (100%)
 rename src/assets/examples/{radio-ngmodel-example.css.html => radio-ng-model-example-css.html} (100%)
 rename src/assets/examples/{radio-ngmodel-example.html.html => radio-ng-model-example-html.html} (100%)
 rename src/assets/examples/{radio-ngmodel-example.ts.html => radio-ng-model-example-ts.html} (69%)
 rename src/assets/examples/{radio-overview-example.css.html => radio-overview-example-css.html} (100%)
 rename src/assets/examples/{radio-overview-example.html.html => radio-overview-example-html.html} (100%)
 rename src/assets/examples/{radio-overview-example.ts.html => radio-overview-example-ts.html} (100%)
 rename src/assets/examples/{select-form-example.css.html => select-form-example-css.html} (100%)
 rename src/assets/examples/{select-form-example.html.html => select-form-example-html.html} (100%)
 rename src/assets/examples/{select-form-example.ts.html => select-form-example-ts.html} (100%)
 rename src/assets/examples/{select-overview-example.css.html => select-overview-example-css.html} (100%)
 rename src/assets/examples/{select-overview-example.html.html => select-overview-example-html.html} (100%)
 rename src/assets/examples/{select-overview-example.ts.html => select-overview-example-ts.html} (100%)
 rename src/assets/examples/{sidenav-fab-example.css.html => sidenav-fab-example-css.html} (100%)
 rename src/assets/examples/{sidenav-fab-example.html.html => sidenav-fab-example-html.html} (100%)
 rename src/assets/examples/{sidenav-fab-example.ts.html => sidenav-fab-example-ts.html} (100%)
 rename src/assets/examples/{sidenav-overview-example.css.html => sidenav-overview-example-css.html} (100%)
 rename src/assets/examples/{sidenav-overview-example.html.html => sidenav-overview-example-html.html} (100%)
 rename src/assets/examples/{sidenav-overview-example.ts.html => sidenav-overview-example-ts.html} (100%)
 rename src/assets/examples/{slide-toggle-configurable-example.css.html => slide-toggle-configurable-example-css.html} (100%)
 rename src/assets/examples/{slide-toggle-configurable-example.html.html => slide-toggle-configurable-example-html.html} (100%)
 rename src/assets/examples/{slide-toggle-configurable-example.ts.html => slide-toggle-configurable-example-ts.html} (100%)
 rename src/assets/examples/{slide-toggle-overview-example.css.html => slide-toggle-overview-example-css.html} (100%)
 rename src/assets/examples/{slide-toggle-overview-example.html.html => slide-toggle-overview-example-html.html} (100%)
 rename src/assets/examples/{slide-toggle-overview-example.ts.html => slide-toggle-overview-example-ts.html} (100%)
 rename src/assets/examples/{slider-configurable-example.css.html => slider-configurable-example-css.html} (100%)
 rename src/assets/examples/{slider-configurable-example.html.html => slider-configurable-example-html.html} (100%)
 rename src/assets/examples/{slider-configurable-example.ts.html => slider-configurable-example-ts.html} (100%)
 rename src/assets/examples/{slider-overview-example.css.html => slider-overview-example-css.html} (100%)
 rename src/assets/examples/{slider-overview-example.html.html => slider-overview-example-html.html} (100%)
 rename src/assets/examples/{slider-overview-example.ts.html => slider-overview-example-ts.html} (100%)
 create mode 100644 src/assets/examples/snack-bar-component-example-html.html
 rename src/assets/examples/{snack-bar-component-example-snack.css.html => snack-bar-component-example-snack-css.html} (100%)
 rename src/assets/examples/{snack-bar-component-example-snack.html.html => snack-bar-component-example-snack-html.html} (100%)
 rename src/assets/examples/{snack-bar-component-example.ts.html => snack-bar-component-example-ts.html} (100%)
 rename src/assets/examples/{snack-bar-overview-example.css.html => snack-bar-overview-example-css.html} (100%)
 rename src/assets/examples/{snack-bar-overview-example.html.html => snack-bar-overview-example-html.html} (100%)
 rename src/assets/examples/{snack-bar-overview-example.ts.html => snack-bar-overview-example-ts.html} (100%)
 rename src/assets/examples/{tabs-overview-example.css.html => tabs-overview-example-css.html} (100%)
 rename src/assets/examples/{tabs-overview-example.html.html => tabs-overview-example-html.html} (100%)
 rename src/assets/examples/{tabs-overview-example.ts.html => tabs-overview-example-ts.html} (100%)
 rename src/assets/examples/{tabs-template-label-example.css.html => tabs-template-label-example-css.html} (100%)
 rename src/assets/examples/{tabs-template-label-example.html.html => tabs-template-label-example-html.html} (100%)
 rename src/assets/examples/{tabs-template-label-example.ts.html => tabs-template-label-example-ts.html} (100%)
 rename src/assets/examples/{toolbar-multirow-example.css.html => toolbar-multirow-example-css.html} (100%)
 rename src/assets/examples/{toolbar-multirow-example.html.html => toolbar-multirow-example-html.html} (100%)
 rename src/assets/examples/{toolbar-multirow-example.ts.html => toolbar-multirow-example-ts.html} (100%)
 rename src/assets/examples/{toolbar-overview-example.css.html => toolbar-overview-example-css.html} (100%)
 rename src/assets/examples/{toolbar-overview-example.html.html => toolbar-overview-example-html.html} (100%)
 rename src/assets/examples/{toolbar-overview-example.ts.html => toolbar-overview-example-ts.html} (100%)
 rename src/assets/examples/{tooltip-overview-example.css.html => tooltip-overview-example-css.html} (100%)
 rename src/assets/examples/{tooltip-overview-example.html.html => tooltip-overview-example-html.html} (100%)
 rename src/assets/examples/{tooltip-overview-example.ts.html => tooltip-overview-example-ts.html} (100%)
 rename src/assets/examples/{tooltip-position-example.css.html => tooltip-position-example-css.html} (100%)
 rename src/assets/examples/{tooltip-position-example.html.html => tooltip-position-example-html.html} (100%)
 rename src/assets/examples/{tooltip-position-example.ts.html => tooltip-position-example-ts.html} (100%)

diff --git a/src/app/shared/example-viewer/example-viewer.ts b/src/app/shared/example-viewer/example-viewer.ts
index e1423da74..490b544f2 100644
--- a/src/app/shared/example-viewer/example-viewer.ts
+++ b/src/app/shared/example-viewer/example-viewer.ts
@@ -48,6 +48,6 @@ export class ExampleViewer {
   }
 
   exampleFileUrl(extension: string) {
-    return `/assets/examples/${this.example}-example.${extension.toLowerCase()}.html`;
+    return `/assets/examples/${this.example}-example-${extension.toLowerCase()}.html`;
   }
 }
diff --git a/src/assets/documents/overview/icon.html b/src/assets/documents/overview/icon.html
index f071d8259..286bd8c30 100644
--- a/src/assets/documents/overview/icon.html
+++ b/src/assets/documents/overview/icon.html
@@ -1,6 +1,6 @@
 <p><code>md-icon</code> makes it easier to use <em>vector-based</em> icons in your app.  This directive supports both
 icon fonts and SVG icons, but not bitmap-based formats (png, jpg, etc.).</p>
-<div material-docs-example="icon-example"></div>
+<div material-docs-example="icon-overview"></div>
 <h3 id="registering-icons">Registering icons</h3>
 <p><code>MdIconRegistry</code> is an injectable service that allows you to associate icon names with SVG URLs and
 define aliases for CSS font classes. Its methods are discussed below and listed in the API summary.</p>
diff --git a/src/assets/examples/button-overview-example.css.html b/src/assets/examples/button-overview-example-css.html
similarity index 100%
rename from src/assets/examples/button-overview-example.css.html
rename to src/assets/examples/button-overview-example-css.html
diff --git a/src/assets/examples/button-overview-example.html.html b/src/assets/examples/button-overview-example-html.html
similarity index 100%
rename from src/assets/examples/button-overview-example.html.html
rename to src/assets/examples/button-overview-example-html.html
diff --git a/src/assets/examples/button-overview-example.ts.html b/src/assets/examples/button-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/button-overview-example.ts.html
rename to src/assets/examples/button-overview-example-ts.html
diff --git a/src/assets/examples/button-toggle-exclusive-example.css.html b/src/assets/examples/button-toggle-exclusive-example-css.html
similarity index 100%
rename from src/assets/examples/button-toggle-exclusive-example.css.html
rename to src/assets/examples/button-toggle-exclusive-example-css.html
diff --git a/src/assets/examples/button-toggle-exclusive-example.html.html b/src/assets/examples/button-toggle-exclusive-example-html.html
similarity index 100%
rename from src/assets/examples/button-toggle-exclusive-example.html.html
rename to src/assets/examples/button-toggle-exclusive-example-html.html
diff --git a/src/assets/examples/button-toggle-exclusive-example.ts.html b/src/assets/examples/button-toggle-exclusive-example-ts.html
similarity index 100%
rename from src/assets/examples/button-toggle-exclusive-example.ts.html
rename to src/assets/examples/button-toggle-exclusive-example-ts.html
diff --git a/src/assets/examples/button-toggle-overview-example.css.html b/src/assets/examples/button-toggle-overview-example-css.html
similarity index 100%
rename from src/assets/examples/button-toggle-overview-example.css.html
rename to src/assets/examples/button-toggle-overview-example-css.html
diff --git a/src/assets/examples/button-toggle-overview-example.html.html b/src/assets/examples/button-toggle-overview-example-html.html
similarity index 100%
rename from src/assets/examples/button-toggle-overview-example.html.html
rename to src/assets/examples/button-toggle-overview-example-html.html
diff --git a/src/assets/examples/button-toggle-overview-example.ts.html b/src/assets/examples/button-toggle-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/button-toggle-overview-example.ts.html
rename to src/assets/examples/button-toggle-overview-example-ts.html
diff --git a/src/assets/examples/button-types-example.css.html b/src/assets/examples/button-types-example-css.html
similarity index 100%
rename from src/assets/examples/button-types-example.css.html
rename to src/assets/examples/button-types-example-css.html
diff --git a/src/assets/examples/button-types-example.html.html b/src/assets/examples/button-types-example-html.html
similarity index 100%
rename from src/assets/examples/button-types-example.html.html
rename to src/assets/examples/button-types-example-html.html
diff --git a/src/assets/examples/button-types-example.ts.html b/src/assets/examples/button-types-example-ts.html
similarity index 100%
rename from src/assets/examples/button-types-example.ts.html
rename to src/assets/examples/button-types-example-ts.html
diff --git a/src/assets/examples/card-fancy-example.css.html b/src/assets/examples/card-fancy-example-css.html
similarity index 100%
rename from src/assets/examples/card-fancy-example.css.html
rename to src/assets/examples/card-fancy-example-css.html
diff --git a/src/assets/examples/card-fancy-example.html.html b/src/assets/examples/card-fancy-example-html.html
similarity index 100%
rename from src/assets/examples/card-fancy-example.html.html
rename to src/assets/examples/card-fancy-example-html.html
diff --git a/src/assets/examples/card-fancy-example.ts.html b/src/assets/examples/card-fancy-example-ts.html
similarity index 100%
rename from src/assets/examples/card-fancy-example.ts.html
rename to src/assets/examples/card-fancy-example-ts.html
diff --git a/src/assets/examples/card-overview-example.css.html b/src/assets/examples/card-overview-example-css.html
similarity index 100%
rename from src/assets/examples/card-overview-example.css.html
rename to src/assets/examples/card-overview-example-css.html
diff --git a/src/assets/examples/card-overview-example.html.html b/src/assets/examples/card-overview-example-html.html
similarity index 100%
rename from src/assets/examples/card-overview-example.html.html
rename to src/assets/examples/card-overview-example-html.html
diff --git a/src/assets/examples/card-overview-example.ts.html b/src/assets/examples/card-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/card-overview-example.ts.html
rename to src/assets/examples/card-overview-example-ts.html
diff --git a/src/assets/examples/checkbox-configurable-example.css.html b/src/assets/examples/checkbox-configurable-example-css.html
similarity index 100%
rename from src/assets/examples/checkbox-configurable-example.css.html
rename to src/assets/examples/checkbox-configurable-example-css.html
diff --git a/src/assets/examples/checkbox-configurable-example.html.html b/src/assets/examples/checkbox-configurable-example-html.html
similarity index 100%
rename from src/assets/examples/checkbox-configurable-example.html.html
rename to src/assets/examples/checkbox-configurable-example-html.html
diff --git a/src/assets/examples/checkbox-configurable-example.ts.html b/src/assets/examples/checkbox-configurable-example-ts.html
similarity index 100%
rename from src/assets/examples/checkbox-configurable-example.ts.html
rename to src/assets/examples/checkbox-configurable-example-ts.html
diff --git a/src/assets/examples/checkbox-overview-example.css.html b/src/assets/examples/checkbox-overview-example-css.html
similarity index 100%
rename from src/assets/examples/checkbox-overview-example.css.html
rename to src/assets/examples/checkbox-overview-example-css.html
diff --git a/src/assets/examples/checkbox-overview-example.html.html b/src/assets/examples/checkbox-overview-example-html.html
similarity index 100%
rename from src/assets/examples/checkbox-overview-example.html.html
rename to src/assets/examples/checkbox-overview-example-html.html
diff --git a/src/assets/examples/checkbox-overview-example.ts.html b/src/assets/examples/checkbox-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/checkbox-overview-example.ts.html
rename to src/assets/examples/checkbox-overview-example-ts.html
diff --git a/src/assets/examples/chips-overview-example.css.html b/src/assets/examples/chips-overview-example-css.html
similarity index 100%
rename from src/assets/examples/chips-overview-example.css.html
rename to src/assets/examples/chips-overview-example-css.html
diff --git a/src/assets/examples/chips-overview-example.html.html b/src/assets/examples/chips-overview-example-html.html
similarity index 100%
rename from src/assets/examples/chips-overview-example.html.html
rename to src/assets/examples/chips-overview-example-html.html
diff --git a/src/assets/examples/chips-overview-example.ts.html b/src/assets/examples/chips-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/chips-overview-example.ts.html
rename to src/assets/examples/chips-overview-example-ts.html
diff --git a/src/assets/examples/chips-stacked-example.css.html b/src/assets/examples/chips-stacked-example-css.html
similarity index 100%
rename from src/assets/examples/chips-stacked-example.css.html
rename to src/assets/examples/chips-stacked-example-css.html
diff --git a/src/assets/examples/chips-stacked-example.html.html b/src/assets/examples/chips-stacked-example-html.html
similarity index 100%
rename from src/assets/examples/chips-stacked-example.html.html
rename to src/assets/examples/chips-stacked-example-html.html
diff --git a/src/assets/examples/chips-stacked-example.ts.html b/src/assets/examples/chips-stacked-example-ts.html
similarity index 100%
rename from src/assets/examples/chips-stacked-example.ts.html
rename to src/assets/examples/chips-stacked-example-ts.html
diff --git a/src/assets/examples/dialog-overview-example.css.html b/src/assets/examples/dialog-overview-example-css.html
similarity index 100%
rename from src/assets/examples/dialog-overview-example.css.html
rename to src/assets/examples/dialog-overview-example-css.html
diff --git a/src/assets/examples/dialog-overview-example-dialog.html.html b/src/assets/examples/dialog-overview-example-dialog-html.html
similarity index 100%
rename from src/assets/examples/dialog-overview-example-dialog.html.html
rename to src/assets/examples/dialog-overview-example-dialog-html.html
diff --git a/src/assets/examples/dialog-overview-example.html.html b/src/assets/examples/dialog-overview-example-html.html
similarity index 100%
rename from src/assets/examples/dialog-overview-example.html.html
rename to src/assets/examples/dialog-overview-example-html.html
diff --git a/src/assets/examples/dialog-overview-example.ts.html b/src/assets/examples/dialog-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/dialog-overview-example.ts.html
rename to src/assets/examples/dialog-overview-example-ts.html
diff --git a/src/assets/examples/dialog-result-example.css.html b/src/assets/examples/dialog-result-example-css.html
similarity index 100%
rename from src/assets/examples/dialog-result-example.css.html
rename to src/assets/examples/dialog-result-example-css.html
diff --git a/src/assets/examples/dialog-result-example-dialog.html.html b/src/assets/examples/dialog-result-example-dialog-html.html
similarity index 100%
rename from src/assets/examples/dialog-result-example-dialog.html.html
rename to src/assets/examples/dialog-result-example-dialog-html.html
diff --git a/src/assets/examples/dialog-result-example.html.html b/src/assets/examples/dialog-result-example-html.html
similarity index 100%
rename from src/assets/examples/dialog-result-example.html.html
rename to src/assets/examples/dialog-result-example-html.html
diff --git a/src/assets/examples/dialog-result-example.ts.html b/src/assets/examples/dialog-result-example-ts.html
similarity index 100%
rename from src/assets/examples/dialog-result-example.ts.html
rename to src/assets/examples/dialog-result-example-ts.html
diff --git a/src/assets/examples/grid-list-dynamic-example.css.html b/src/assets/examples/grid-list-dynamic-example-css.html
similarity index 100%
rename from src/assets/examples/grid-list-dynamic-example.css.html
rename to src/assets/examples/grid-list-dynamic-example-css.html
diff --git a/src/assets/examples/grid-list-dynamic-example.html.html b/src/assets/examples/grid-list-dynamic-example-html.html
similarity index 100%
rename from src/assets/examples/grid-list-dynamic-example.html.html
rename to src/assets/examples/grid-list-dynamic-example-html.html
diff --git a/src/assets/examples/grid-list-dynamic-example.ts.html b/src/assets/examples/grid-list-dynamic-example-ts.html
similarity index 100%
rename from src/assets/examples/grid-list-dynamic-example.ts.html
rename to src/assets/examples/grid-list-dynamic-example-ts.html
diff --git a/src/assets/examples/grid-list-overview-example.css.html b/src/assets/examples/grid-list-overview-example-css.html
similarity index 100%
rename from src/assets/examples/grid-list-overview-example.css.html
rename to src/assets/examples/grid-list-overview-example-css.html
diff --git a/src/assets/examples/grid-list-overview-example.html.html b/src/assets/examples/grid-list-overview-example-html.html
similarity index 100%
rename from src/assets/examples/grid-list-overview-example.html.html
rename to src/assets/examples/grid-list-overview-example-html.html
diff --git a/src/assets/examples/grid-list-overview-example.ts.html b/src/assets/examples/grid-list-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/grid-list-overview-example.ts.html
rename to src/assets/examples/grid-list-overview-example-ts.html
diff --git a/src/assets/examples/icon-overview-example.css.html b/src/assets/examples/icon-overview-example-css.html
similarity index 100%
rename from src/assets/examples/icon-overview-example.css.html
rename to src/assets/examples/icon-overview-example-css.html
diff --git a/src/assets/examples/icon-overview-example.html.html b/src/assets/examples/icon-overview-example-html.html
similarity index 100%
rename from src/assets/examples/icon-overview-example.html.html
rename to src/assets/examples/icon-overview-example-html.html
diff --git a/src/assets/examples/icon-overview-example.ts.html b/src/assets/examples/icon-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/icon-overview-example.ts.html
rename to src/assets/examples/icon-overview-example-ts.html
diff --git a/src/assets/examples/icon-svg-example.css.html b/src/assets/examples/icon-svg-example-css.html
similarity index 100%
rename from src/assets/examples/icon-svg-example.css.html
rename to src/assets/examples/icon-svg-example-css.html
diff --git a/src/assets/examples/icon-svg-example.html.html b/src/assets/examples/icon-svg-example-html.html
similarity index 100%
rename from src/assets/examples/icon-svg-example.html.html
rename to src/assets/examples/icon-svg-example-html.html
diff --git a/src/assets/examples/icon-svg-example.ts.html b/src/assets/examples/icon-svg-example-ts.html
similarity index 100%
rename from src/assets/examples/icon-svg-example.ts.html
rename to src/assets/examples/icon-svg-example-ts.html
diff --git a/src/assets/examples/input-form-example.css.html b/src/assets/examples/input-form-example-css.html
similarity index 100%
rename from src/assets/examples/input-form-example.css.html
rename to src/assets/examples/input-form-example-css.html
diff --git a/src/assets/examples/input-form-example.html.html b/src/assets/examples/input-form-example-html.html
similarity index 100%
rename from src/assets/examples/input-form-example.html.html
rename to src/assets/examples/input-form-example-html.html
diff --git a/src/assets/examples/input-form-example.ts.html b/src/assets/examples/input-form-example-ts.html
similarity index 100%
rename from src/assets/examples/input-form-example.ts.html
rename to src/assets/examples/input-form-example-ts.html
diff --git a/src/assets/examples/input-overview-example.css.html b/src/assets/examples/input-overview-example-css.html
similarity index 100%
rename from src/assets/examples/input-overview-example.css.html
rename to src/assets/examples/input-overview-example-css.html
diff --git a/src/assets/examples/input-overview-example.html.html b/src/assets/examples/input-overview-example-html.html
similarity index 100%
rename from src/assets/examples/input-overview-example.html.html
rename to src/assets/examples/input-overview-example-html.html
diff --git a/src/assets/examples/input-overview-example.ts.html b/src/assets/examples/input-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/input-overview-example.ts.html
rename to src/assets/examples/input-overview-example-ts.html
diff --git a/src/assets/examples/list-overview-example.css.html b/src/assets/examples/list-overview-example-css.html
similarity index 100%
rename from src/assets/examples/list-overview-example.css.html
rename to src/assets/examples/list-overview-example-css.html
diff --git a/src/assets/examples/list-overview-example.html.html b/src/assets/examples/list-overview-example-html.html
similarity index 100%
rename from src/assets/examples/list-overview-example.html.html
rename to src/assets/examples/list-overview-example-html.html
diff --git a/src/assets/examples/list-overview-example.ts.html b/src/assets/examples/list-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/list-overview-example.ts.html
rename to src/assets/examples/list-overview-example-ts.html
diff --git a/src/assets/examples/list-sections-example.css.html b/src/assets/examples/list-sections-example-css.html
similarity index 100%
rename from src/assets/examples/list-sections-example.css.html
rename to src/assets/examples/list-sections-example-css.html
diff --git a/src/assets/examples/list-sections-example.html.html b/src/assets/examples/list-sections-example-html.html
similarity index 100%
rename from src/assets/examples/list-sections-example.html.html
rename to src/assets/examples/list-sections-example-html.html
diff --git a/src/assets/examples/list-sections-example.ts.html b/src/assets/examples/list-sections-example-ts.html
similarity index 100%
rename from src/assets/examples/list-sections-example.ts.html
rename to src/assets/examples/list-sections-example-ts.html
diff --git a/src/assets/examples/menu-icons-example.css.html b/src/assets/examples/menu-icons-example-css.html
similarity index 100%
rename from src/assets/examples/menu-icons-example.css.html
rename to src/assets/examples/menu-icons-example-css.html
diff --git a/src/assets/examples/menu-icons-example.html.html b/src/assets/examples/menu-icons-example-html.html
similarity index 100%
rename from src/assets/examples/menu-icons-example.html.html
rename to src/assets/examples/menu-icons-example-html.html
diff --git a/src/assets/examples/menu-icons-example.ts.html b/src/assets/examples/menu-icons-example-ts.html
similarity index 100%
rename from src/assets/examples/menu-icons-example.ts.html
rename to src/assets/examples/menu-icons-example-ts.html
diff --git a/src/assets/examples/menu-overview-example.css.html b/src/assets/examples/menu-overview-example-css.html
similarity index 100%
rename from src/assets/examples/menu-overview-example.css.html
rename to src/assets/examples/menu-overview-example-css.html
diff --git a/src/assets/examples/menu-overview-example.html.html b/src/assets/examples/menu-overview-example-html.html
similarity index 100%
rename from src/assets/examples/menu-overview-example.html.html
rename to src/assets/examples/menu-overview-example-html.html
diff --git a/src/assets/examples/menu-overview-example.ts.html b/src/assets/examples/menu-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/menu-overview-example.ts.html
rename to src/assets/examples/menu-overview-example-ts.html
diff --git a/src/assets/examples/progress-bar-configurable-example.css.html b/src/assets/examples/progress-bar-configurable-example-css.html
similarity index 100%
rename from src/assets/examples/progress-bar-configurable-example.css.html
rename to src/assets/examples/progress-bar-configurable-example-css.html
diff --git a/src/assets/examples/progress-bar-configurable-example.html.html b/src/assets/examples/progress-bar-configurable-example-html.html
similarity index 100%
rename from src/assets/examples/progress-bar-configurable-example.html.html
rename to src/assets/examples/progress-bar-configurable-example-html.html
diff --git a/src/assets/examples/progress-bar-configurable-example.ts.html b/src/assets/examples/progress-bar-configurable-example-ts.html
similarity index 100%
rename from src/assets/examples/progress-bar-configurable-example.ts.html
rename to src/assets/examples/progress-bar-configurable-example-ts.html
diff --git a/src/assets/examples/progress-bar-overview-example.css.html b/src/assets/examples/progress-bar-overview-example-css.html
similarity index 100%
rename from src/assets/examples/progress-bar-overview-example.css.html
rename to src/assets/examples/progress-bar-overview-example-css.html
diff --git a/src/assets/examples/progress-bar-overview-example.html.html b/src/assets/examples/progress-bar-overview-example-html.html
similarity index 100%
rename from src/assets/examples/progress-bar-overview-example.html.html
rename to src/assets/examples/progress-bar-overview-example-html.html
diff --git a/src/assets/examples/progress-bar-overview-example.ts.html b/src/assets/examples/progress-bar-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/progress-bar-overview-example.ts.html
rename to src/assets/examples/progress-bar-overview-example-ts.html
diff --git a/src/assets/examples/progress-circle-configurable-example.css.html b/src/assets/examples/progress-circle-configurable-example-css.html
similarity index 100%
rename from src/assets/examples/progress-circle-configurable-example.css.html
rename to src/assets/examples/progress-circle-configurable-example-css.html
diff --git a/src/assets/examples/progress-circle-configurable-example.html.html b/src/assets/examples/progress-circle-configurable-example-html.html
similarity index 100%
rename from src/assets/examples/progress-circle-configurable-example.html.html
rename to src/assets/examples/progress-circle-configurable-example-html.html
diff --git a/src/assets/examples/progress-circle-configurable-example.ts.html b/src/assets/examples/progress-circle-configurable-example-ts.html
similarity index 100%
rename from src/assets/examples/progress-circle-configurable-example.ts.html
rename to src/assets/examples/progress-circle-configurable-example-ts.html
diff --git a/src/assets/examples/progress-circle-overview-example.css.html b/src/assets/examples/progress-circle-overview-example-css.html
similarity index 100%
rename from src/assets/examples/progress-circle-overview-example.css.html
rename to src/assets/examples/progress-circle-overview-example-css.html
diff --git a/src/assets/examples/progress-circle-overview-example.html.html b/src/assets/examples/progress-circle-overview-example-html.html
similarity index 100%
rename from src/assets/examples/progress-circle-overview-example.html.html
rename to src/assets/examples/progress-circle-overview-example-html.html
diff --git a/src/assets/examples/progress-circle-overview-example.ts.html b/src/assets/examples/progress-circle-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/progress-circle-overview-example.ts.html
rename to src/assets/examples/progress-circle-overview-example-ts.html
diff --git a/src/assets/examples/radio-ngmodel-example.css.html b/src/assets/examples/radio-ng-model-example-css.html
similarity index 100%
rename from src/assets/examples/radio-ngmodel-example.css.html
rename to src/assets/examples/radio-ng-model-example-css.html
diff --git a/src/assets/examples/radio-ngmodel-example.html.html b/src/assets/examples/radio-ng-model-example-html.html
similarity index 100%
rename from src/assets/examples/radio-ngmodel-example.html.html
rename to src/assets/examples/radio-ng-model-example-html.html
diff --git a/src/assets/examples/radio-ngmodel-example.ts.html b/src/assets/examples/radio-ng-model-example-ts.html
similarity index 69%
rename from src/assets/examples/radio-ngmodel-example.ts.html
rename to src/assets/examples/radio-ng-model-example-ts.html
index 13a2c9581..06b8f9152 100644
--- a/src/assets/examples/radio-ngmodel-example.ts.html
+++ b/src/assets/examples/radio-ng-model-example-ts.html
@@ -2,9 +2,9 @@
 
 
 <span class="hljs-meta">@Component</span>({
-  selector: <span class="hljs-string">'radio-ngmodel-example'</span>,
-  templateUrl: <span class="hljs-string">'./radio-ngmodel-example.html'</span>,
-  styleUrls: [<span class="hljs-string">'./radio-ngmodel-example.css'</span>],
+  selector: <span class="hljs-string">'radio-ng-model-example'</span>,
+  templateUrl: <span class="hljs-string">'./radio-ng-model-example.html'</span>,
+  styleUrls: [<span class="hljs-string">'./radio-ng-model-example.css'</span>],
 })
 <span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> RadioNgModelExample {
   favoriteSeason: <span class="hljs-built_in">string</span>;
diff --git a/src/assets/examples/radio-overview-example.css.html b/src/assets/examples/radio-overview-example-css.html
similarity index 100%
rename from src/assets/examples/radio-overview-example.css.html
rename to src/assets/examples/radio-overview-example-css.html
diff --git a/src/assets/examples/radio-overview-example.html.html b/src/assets/examples/radio-overview-example-html.html
similarity index 100%
rename from src/assets/examples/radio-overview-example.html.html
rename to src/assets/examples/radio-overview-example-html.html
diff --git a/src/assets/examples/radio-overview-example.ts.html b/src/assets/examples/radio-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/radio-overview-example.ts.html
rename to src/assets/examples/radio-overview-example-ts.html
diff --git a/src/assets/examples/select-form-example.css.html b/src/assets/examples/select-form-example-css.html
similarity index 100%
rename from src/assets/examples/select-form-example.css.html
rename to src/assets/examples/select-form-example-css.html
diff --git a/src/assets/examples/select-form-example.html.html b/src/assets/examples/select-form-example-html.html
similarity index 100%
rename from src/assets/examples/select-form-example.html.html
rename to src/assets/examples/select-form-example-html.html
diff --git a/src/assets/examples/select-form-example.ts.html b/src/assets/examples/select-form-example-ts.html
similarity index 100%
rename from src/assets/examples/select-form-example.ts.html
rename to src/assets/examples/select-form-example-ts.html
diff --git a/src/assets/examples/select-overview-example.css.html b/src/assets/examples/select-overview-example-css.html
similarity index 100%
rename from src/assets/examples/select-overview-example.css.html
rename to src/assets/examples/select-overview-example-css.html
diff --git a/src/assets/examples/select-overview-example.html.html b/src/assets/examples/select-overview-example-html.html
similarity index 100%
rename from src/assets/examples/select-overview-example.html.html
rename to src/assets/examples/select-overview-example-html.html
diff --git a/src/assets/examples/select-overview-example.ts.html b/src/assets/examples/select-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/select-overview-example.ts.html
rename to src/assets/examples/select-overview-example-ts.html
diff --git a/src/assets/examples/sidenav-fab-example.css.html b/src/assets/examples/sidenav-fab-example-css.html
similarity index 100%
rename from src/assets/examples/sidenav-fab-example.css.html
rename to src/assets/examples/sidenav-fab-example-css.html
diff --git a/src/assets/examples/sidenav-fab-example.html.html b/src/assets/examples/sidenav-fab-example-html.html
similarity index 100%
rename from src/assets/examples/sidenav-fab-example.html.html
rename to src/assets/examples/sidenav-fab-example-html.html
diff --git a/src/assets/examples/sidenav-fab-example.ts.html b/src/assets/examples/sidenav-fab-example-ts.html
similarity index 100%
rename from src/assets/examples/sidenav-fab-example.ts.html
rename to src/assets/examples/sidenav-fab-example-ts.html
diff --git a/src/assets/examples/sidenav-overview-example.css.html b/src/assets/examples/sidenav-overview-example-css.html
similarity index 100%
rename from src/assets/examples/sidenav-overview-example.css.html
rename to src/assets/examples/sidenav-overview-example-css.html
diff --git a/src/assets/examples/sidenav-overview-example.html.html b/src/assets/examples/sidenav-overview-example-html.html
similarity index 100%
rename from src/assets/examples/sidenav-overview-example.html.html
rename to src/assets/examples/sidenav-overview-example-html.html
diff --git a/src/assets/examples/sidenav-overview-example.ts.html b/src/assets/examples/sidenav-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/sidenav-overview-example.ts.html
rename to src/assets/examples/sidenav-overview-example-ts.html
diff --git a/src/assets/examples/slide-toggle-configurable-example.css.html b/src/assets/examples/slide-toggle-configurable-example-css.html
similarity index 100%
rename from src/assets/examples/slide-toggle-configurable-example.css.html
rename to src/assets/examples/slide-toggle-configurable-example-css.html
diff --git a/src/assets/examples/slide-toggle-configurable-example.html.html b/src/assets/examples/slide-toggle-configurable-example-html.html
similarity index 100%
rename from src/assets/examples/slide-toggle-configurable-example.html.html
rename to src/assets/examples/slide-toggle-configurable-example-html.html
diff --git a/src/assets/examples/slide-toggle-configurable-example.ts.html b/src/assets/examples/slide-toggle-configurable-example-ts.html
similarity index 100%
rename from src/assets/examples/slide-toggle-configurable-example.ts.html
rename to src/assets/examples/slide-toggle-configurable-example-ts.html
diff --git a/src/assets/examples/slide-toggle-overview-example.css.html b/src/assets/examples/slide-toggle-overview-example-css.html
similarity index 100%
rename from src/assets/examples/slide-toggle-overview-example.css.html
rename to src/assets/examples/slide-toggle-overview-example-css.html
diff --git a/src/assets/examples/slide-toggle-overview-example.html.html b/src/assets/examples/slide-toggle-overview-example-html.html
similarity index 100%
rename from src/assets/examples/slide-toggle-overview-example.html.html
rename to src/assets/examples/slide-toggle-overview-example-html.html
diff --git a/src/assets/examples/slide-toggle-overview-example.ts.html b/src/assets/examples/slide-toggle-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/slide-toggle-overview-example.ts.html
rename to src/assets/examples/slide-toggle-overview-example-ts.html
diff --git a/src/assets/examples/slider-configurable-example.css.html b/src/assets/examples/slider-configurable-example-css.html
similarity index 100%
rename from src/assets/examples/slider-configurable-example.css.html
rename to src/assets/examples/slider-configurable-example-css.html
diff --git a/src/assets/examples/slider-configurable-example.html.html b/src/assets/examples/slider-configurable-example-html.html
similarity index 100%
rename from src/assets/examples/slider-configurable-example.html.html
rename to src/assets/examples/slider-configurable-example-html.html
diff --git a/src/assets/examples/slider-configurable-example.ts.html b/src/assets/examples/slider-configurable-example-ts.html
similarity index 100%
rename from src/assets/examples/slider-configurable-example.ts.html
rename to src/assets/examples/slider-configurable-example-ts.html
diff --git a/src/assets/examples/slider-overview-example.css.html b/src/assets/examples/slider-overview-example-css.html
similarity index 100%
rename from src/assets/examples/slider-overview-example.css.html
rename to src/assets/examples/slider-overview-example-css.html
diff --git a/src/assets/examples/slider-overview-example.html.html b/src/assets/examples/slider-overview-example-html.html
similarity index 100%
rename from src/assets/examples/slider-overview-example.html.html
rename to src/assets/examples/slider-overview-example-html.html
diff --git a/src/assets/examples/slider-overview-example.ts.html b/src/assets/examples/slider-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/slider-overview-example.ts.html
rename to src/assets/examples/slider-overview-example-ts.html
diff --git a/src/assets/examples/snack-bar-component-example-html.html b/src/assets/examples/snack-bar-component-example-html.html
new file mode 100644
index 000000000..6154a011f
--- /dev/null
+++ b/src/assets/examples/snack-bar-component-example-html.html
@@ -0,0 +1,3 @@
+<span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">md-button</span> (<span class="hljs-attr">click</span>)=<span class="hljs-string">"openSnackBar()"</span> <span class="hljs-attr">aria-label</span>=<span class="hljs-string">"Show an example snack-bar"</span>&gt;</span>
+  Pizza party
+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
diff --git a/src/assets/examples/snack-bar-component-example-snack.css.html b/src/assets/examples/snack-bar-component-example-snack-css.html
similarity index 100%
rename from src/assets/examples/snack-bar-component-example-snack.css.html
rename to src/assets/examples/snack-bar-component-example-snack-css.html
diff --git a/src/assets/examples/snack-bar-component-example-snack.html.html b/src/assets/examples/snack-bar-component-example-snack-html.html
similarity index 100%
rename from src/assets/examples/snack-bar-component-example-snack.html.html
rename to src/assets/examples/snack-bar-component-example-snack-html.html
diff --git a/src/assets/examples/snack-bar-component-example.ts.html b/src/assets/examples/snack-bar-component-example-ts.html
similarity index 100%
rename from src/assets/examples/snack-bar-component-example.ts.html
rename to src/assets/examples/snack-bar-component-example-ts.html
diff --git a/src/assets/examples/snack-bar-overview-example.css.html b/src/assets/examples/snack-bar-overview-example-css.html
similarity index 100%
rename from src/assets/examples/snack-bar-overview-example.css.html
rename to src/assets/examples/snack-bar-overview-example-css.html
diff --git a/src/assets/examples/snack-bar-overview-example.html.html b/src/assets/examples/snack-bar-overview-example-html.html
similarity index 100%
rename from src/assets/examples/snack-bar-overview-example.html.html
rename to src/assets/examples/snack-bar-overview-example-html.html
diff --git a/src/assets/examples/snack-bar-overview-example.ts.html b/src/assets/examples/snack-bar-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/snack-bar-overview-example.ts.html
rename to src/assets/examples/snack-bar-overview-example-ts.html
diff --git a/src/assets/examples/tabs-overview-example.css.html b/src/assets/examples/tabs-overview-example-css.html
similarity index 100%
rename from src/assets/examples/tabs-overview-example.css.html
rename to src/assets/examples/tabs-overview-example-css.html
diff --git a/src/assets/examples/tabs-overview-example.html.html b/src/assets/examples/tabs-overview-example-html.html
similarity index 100%
rename from src/assets/examples/tabs-overview-example.html.html
rename to src/assets/examples/tabs-overview-example-html.html
diff --git a/src/assets/examples/tabs-overview-example.ts.html b/src/assets/examples/tabs-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/tabs-overview-example.ts.html
rename to src/assets/examples/tabs-overview-example-ts.html
diff --git a/src/assets/examples/tabs-template-label-example.css.html b/src/assets/examples/tabs-template-label-example-css.html
similarity index 100%
rename from src/assets/examples/tabs-template-label-example.css.html
rename to src/assets/examples/tabs-template-label-example-css.html
diff --git a/src/assets/examples/tabs-template-label-example.html.html b/src/assets/examples/tabs-template-label-example-html.html
similarity index 100%
rename from src/assets/examples/tabs-template-label-example.html.html
rename to src/assets/examples/tabs-template-label-example-html.html
diff --git a/src/assets/examples/tabs-template-label-example.ts.html b/src/assets/examples/tabs-template-label-example-ts.html
similarity index 100%
rename from src/assets/examples/tabs-template-label-example.ts.html
rename to src/assets/examples/tabs-template-label-example-ts.html
diff --git a/src/assets/examples/toolbar-multirow-example.css.html b/src/assets/examples/toolbar-multirow-example-css.html
similarity index 100%
rename from src/assets/examples/toolbar-multirow-example.css.html
rename to src/assets/examples/toolbar-multirow-example-css.html
diff --git a/src/assets/examples/toolbar-multirow-example.html.html b/src/assets/examples/toolbar-multirow-example-html.html
similarity index 100%
rename from src/assets/examples/toolbar-multirow-example.html.html
rename to src/assets/examples/toolbar-multirow-example-html.html
diff --git a/src/assets/examples/toolbar-multirow-example.ts.html b/src/assets/examples/toolbar-multirow-example-ts.html
similarity index 100%
rename from src/assets/examples/toolbar-multirow-example.ts.html
rename to src/assets/examples/toolbar-multirow-example-ts.html
diff --git a/src/assets/examples/toolbar-overview-example.css.html b/src/assets/examples/toolbar-overview-example-css.html
similarity index 100%
rename from src/assets/examples/toolbar-overview-example.css.html
rename to src/assets/examples/toolbar-overview-example-css.html
diff --git a/src/assets/examples/toolbar-overview-example.html.html b/src/assets/examples/toolbar-overview-example-html.html
similarity index 100%
rename from src/assets/examples/toolbar-overview-example.html.html
rename to src/assets/examples/toolbar-overview-example-html.html
diff --git a/src/assets/examples/toolbar-overview-example.ts.html b/src/assets/examples/toolbar-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/toolbar-overview-example.ts.html
rename to src/assets/examples/toolbar-overview-example-ts.html
diff --git a/src/assets/examples/tooltip-overview-example.css.html b/src/assets/examples/tooltip-overview-example-css.html
similarity index 100%
rename from src/assets/examples/tooltip-overview-example.css.html
rename to src/assets/examples/tooltip-overview-example-css.html
diff --git a/src/assets/examples/tooltip-overview-example.html.html b/src/assets/examples/tooltip-overview-example-html.html
similarity index 100%
rename from src/assets/examples/tooltip-overview-example.html.html
rename to src/assets/examples/tooltip-overview-example-html.html
diff --git a/src/assets/examples/tooltip-overview-example.ts.html b/src/assets/examples/tooltip-overview-example-ts.html
similarity index 100%
rename from src/assets/examples/tooltip-overview-example.ts.html
rename to src/assets/examples/tooltip-overview-example-ts.html
diff --git a/src/assets/examples/tooltip-position-example.css.html b/src/assets/examples/tooltip-position-example-css.html
similarity index 100%
rename from src/assets/examples/tooltip-position-example.css.html
rename to src/assets/examples/tooltip-position-example-css.html
diff --git a/src/assets/examples/tooltip-position-example.html.html b/src/assets/examples/tooltip-position-example-html.html
similarity index 100%
rename from src/assets/examples/tooltip-position-example.html.html
rename to src/assets/examples/tooltip-position-example-html.html
diff --git a/src/assets/examples/tooltip-position-example.ts.html b/src/assets/examples/tooltip-position-example-ts.html
similarity index 100%
rename from src/assets/examples/tooltip-position-example.ts.html
rename to src/assets/examples/tooltip-position-example-ts.html
diff --git a/tools/highlight-examples.sh b/tools/highlight-examples.sh
index afd3e43e2..e0d9184c2 100755
--- a/tools/highlight-examples.sh
+++ b/tools/highlight-examples.sh
@@ -1,3 +1,3 @@
 #!/usr/bin/env bash
 echo "Highlighting example sources. This may take 15 - 20 seconds..."
-find ./src/app/examples/ -mindepth 2 -type f \( -iname "*.css" -or -iname "*.ts" -or -iname "*.html" \) -exec sh -c './tools/syntax-highlight.js {} ./src/assets/examples/$(basename {}).html' \;
+find ./src/app/examples/ -mindepth 2 -type f \( -iname "*.css" -or -iname "*.ts" -or -iname "*.html" \) -exec sh -c './tools/syntax-highlight.js {} ./src/assets/examples/' \;
diff --git a/tools/syntax-highlight.js b/tools/syntax-highlight.js
index e0951d90b..7e8fdb6c3 100755
--- a/tools/syntax-highlight.js
+++ b/tools/syntax-highlight.js
@@ -5,7 +5,7 @@
  * Creates a syntax highlighted HTML file from a source file using highlight.js.
  *
  * Use:
- * syntax-highlight path/to/input/file path/to/output/file
+ * syntax-highlight path/to/input/file path/to/output/dir/
  */
 
 const fs = require('fs');
@@ -13,9 +13,10 @@ const path = require('path');
 const hljs = require('highlight.js');
 
 const inputFile = process.argv[2];
-const outputFile = process.argv[3];
+const outputPath = process.argv[3];
 
-let language = path.extname(inputFile).toLowerCase().slice(1);
+let extension = path.extname(inputFile).toLowerCase().slice(1);
+let language = extension;
 
 // Highlight.js expects 'typescript' written out instead of 'ts'.
 if (language == 'ts') {
@@ -30,5 +31,10 @@ fs.readFile(inputFile, 'utf8', (error, content) => {
   }
 
   let highlighted = hljs.highlight(language, content);
+
+  let filename = path.basename(inputFile);
+  filename = filename.slice(0, filename.lastIndexOf('.')) + '-' + extension + '.html';
+  let outputFile = path.join(outputPath, filename);
+
   fs.writeFile(outputFile, highlighted.value, {encoding: 'utf8'});
 });