diff --git a/.circleci/config.yml b/.circleci/config.yml
index e9e2bf0a183c..94e43921e935 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -157,10 +157,10 @@ jobs:
     - run: ./scripts/circleci/run-saucelabs-tests.sh
 
   # -----------------------------------------------------------------------------------------
-  # Job that builds the demo-app with AOT. In order to speed up this job, the release output
+  # Job that builds the dev-app with AOT. In order to speed up this job, the release output
   # from the workspace storage will be attached to this job.
   # -----------------------------------------------------------------------------------------
-  build_demoapp_aot:
+  build_devapp_aot:
     <<: *job_defaults
     steps:
       - *checkout_code
@@ -197,7 +197,7 @@ jobs:
 
   # -------------------------------------------------------------------------------------------
   # Job that builds all release packages with Gulp. The built packages can be then used in the
-  # same workflow to publish snapshot builds or test the demo-app with the release packages.
+  # same workflow to publish snapshot builds or test the dev-app with the release packages.
   # -------------------------------------------------------------------------------------------
   build_release_packages:
     <<: *job_defaults
@@ -298,7 +298,7 @@ workflows:
   release_output:
     jobs:
       - build_release_packages
-      - build_demoapp_aot:
+      - build_devapp_aot:
           requires:
             - build_release_packages
       - publish_snapshots:
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index 9cc8781250ec..884b19d3e4ca 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -94,58 +94,59 @@
 /guides/**                                         @jelbourn
 /src/material-examples/**                          @jelbourn
 
-# Demo app
-/src/demo-app/*                                    @jelbourn
-/src/demo-app/a11y/**                              @jelbourn
-/src/demo-app/autocomplete/**                      @crisbeto
-/src/demo-app/badge/**                             @jelbourn
-/src/demo-app/baseline/**                          @mmalerba
-/src/demo-app/bottom-sheet/**                      @jelbourn @crisbeto
-/src/demo-app/button-toggle/**                     @jelbourn
-/src/demo-app/button/**                            @jelbourn
-/src/demo-app/card/**                              @jelbourn
-/src/demo-app/checkbox/**                          @jelbourn @devversion
-/src/demo-app/chips/**                             @jelbourn
-/src/demo-app/connected-overlay/**                 @jelbourn @crisbeto
-/src/demo-app/dataset/**                           @andrewseguin
-/src/demo-app/datepicker/**                        @mmalerba
-/src/demo-app/demo-app/**                          @jelbourn
-/src/demo-app/dialog/**                            @jelbourn @crisbeto
-/src/demo-app/drawer/**                            @mmalerba
-/src/demo-app/drag-drop/**                         @crisbeto
-/src/demo-app/example/**                           @andrewseguin
-/src/demo-app/examples-page/**                     @andrewseguin
-/src/demo-app/expansion/**                         @josephperrott
-/src/demo-app/focus-origin/**                      @mmalerba
-/src/demo-app/gestures/**                          @jelbourn
-/src/demo-app/grid-list/**                         @jelbourn
-/src/demo-app/icon/**                              @jelbourn
-/src/demo-app/input/**                             @mmalerba
-/src/demo-app/list/**                              @jelbourn @crisbeto @devversion
-/src/demo-app/live-announcer/**                    @jelbourn
-/src/demo-app/menu/**                              @crisbeto
-/src/demo-app/overlay/**                           @jelbourn @crisbeto
-/src/demo-app/paginator/**                         @andrewseguin
-/src/demo-app/platform/**                          @jelbourn @devversion
-/src/demo-app/portal/**                            @jelbourn
-/src/demo-app/progress-bar/**                      @jelbourn @crisbeto @josephperrott
-/src/demo-app/progress-spinner/**                  @jelbourn @crisbeto @josephperrott
-/src/demo-app/radio/**                             @jelbourn @devversion
-/src/demo-app/ripple/**                            @devversion
-/src/demo-app/screen-type/**                       @josephperrott
-/src/demo-app/select/**                            @crisbeto
-/src/demo-app/sidenav/**                           @mmalerba
-/src/demo-app/slide-toggle/**                      @devversion
-/src/demo-app/slider/**                            @mmalerba
-/src/demo-app/snack-bar/**                         @jelbourn @crisbeto @josephperrott
-/src/demo-app/stepper/**                           @mmalerba
-/src/demo-app/table/**                             @andrewseguin
-/src/demo-app/tabs/**                              @andrewseguin
-/src/demo-app/toolbar/**                           @devversion
-/src/demo-app/tooltip/**                           @andrewseguin
-/src/demo-app/tree/**                              @jelbourn
-/src/demo-app/typography/**                        @crisbeto
-/src/demo-app/virtual-scroll/**                    @mmalerba
+# Accessibility demos
+/src/a11y-demo/**/*                                @jelbourn
+
+# Dev-app
+/src/dev-app/*                                     @jelbourn
+/src/dev-app/autocomplete/**                       @crisbeto
+/src/dev-app/badge/**                              @jelbourn
+/src/dev-app/baseline/**                           @mmalerba
+/src/dev-app/bottom-sheet/**                       @jelbourn @crisbeto
+/src/dev-app/button-toggle/**                      @jelbourn
+/src/dev-app/button/**                             @jelbourn
+/src/dev-app/card/**                               @jelbourn
+/src/dev-app/checkbox/**                           @jelbourn @devversion
+/src/dev-app/chips/**                              @jelbourn
+/src/dev-app/connected-overlay/**                  @jelbourn @crisbeto
+/src/dev-app/dataset/**                            @andrewseguin
+/src/dev-app/datepicker/**                         @mmalerba
+/src/dev-app/dialog/**                             @jelbourn @crisbeto
+/src/dev-app/drawer/**                             @mmalerba
+/src/dev-app/drag-drop/**                          @crisbeto
+/src/dev-app/example/**                            @andrewseguin
+/src/dev-app/examples-page/**                      @andrewseguin
+/src/dev-app/expansion/**                          @josephperrott
+/src/dev-app/focus-origin/**                       @mmalerba
+/src/dev-app/gestures/**                           @jelbourn
+/src/dev-app/grid-list/**                          @jelbourn
+/src/dev-app/icon/**                               @jelbourn
+/src/dev-app/input/**                              @mmalerba
+/src/dev-app/list/**                               @jelbourn @crisbeto @devversion
+/src/dev-app/menu/**                               @crisbeto
+/src/dev-app/live-announcer/**                     @jelbourn
+/src/dev-app/overlay/**                            @jelbourn @crisbeto
+/src/dev-app/paginator/**                          @andrewseguin
+/src/dev-app/platform/**                           @jelbourn @devversion
+/src/dev-app/portal/**                             @jelbourn
+/src/dev-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
+/src/dev-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott
+/src/dev-app/radio/**                              @jelbourn @devversion
+/src/dev-app/ripple/**                             @devversion
+/src/dev-app/screen-type/**                        @josephperrott
+/src/dev-app/select/**                             @crisbeto
+/src/dev-app/sidenav/**                            @mmalerba
+/src/dev-app/slide-toggle/**                       @devversion
+/src/dev-app/slider/**                             @mmalerba
+/src/dev-app/snack-bar/**                          @jelbourn @crisbeto @josephperrott
+/src/dev-app/stepper/**                            @mmalerba
+/src/dev-app/table/**                              @andrewseguin
+/src/dev-app/tabs/**                               @andrewseguin
+/src/dev-app/toolbar/**                            @devversion
+/src/dev-app/tooltip/**                            @andrewseguin
+/src/dev-app/tree/**                               @jelbourn
+/src/dev-app/typography/**                         @crisbeto
+/src/dev-app/virtual-scroll/**                     @mmalerba
 
 # E2E app
 /e2e/*                                             @jelbourn
diff --git a/CODE_REVIEWS.md b/CODE_REVIEWS.md
index 6cf6dd1041a2..ae33a748b210 100644
--- a/CODE_REVIEWS.md
+++ b/CODE_REVIEWS.md
@@ -24,7 +24,7 @@ greatly in keeping the library stable by running against the tests of many appli
 Google. Due to the volume of tests involved, this process means that there can be some delay
 between a PR being approved and it being merged.
 
-The "merge safe" label means that the change doesn't affect the library itself (or the demo-app),
+The "merge safe" label means that the change doesn't affect the library itself (or the dev-app),
 and thus can be merged without this extra presubmit.
 
 The "presubmit failure" label means that the PR has encountered some failure during presubmit and
diff --git a/firebase.json b/firebase.json
index 329e3173365a..3492d51c81ff 100644
--- a/firebase.json
+++ b/firebase.json
@@ -1,6 +1,6 @@
 {
   "hosting": {
-    "public": "dist/packages/demo-app",
+    "public": "dist/packages/dev-app",
     "rewrites": [
       {
         "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg))",
diff --git a/package.json b/package.json
index e8d61b578e11..4807cb87eb95 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
   },
   "scripts": {
     "build": "gulp :publish:build-releases",
-    "demo-app": "gulp serve:devapp",
+    "dev-app": "gulp serve:devapp",
     "test": "gulp test",
     "lint": "gulp lint",
     "e2e": "gulp e2e",
diff --git a/src/a11y-demo/BUILD.bazel b/src/a11y-demo/BUILD.bazel
new file mode 100644
index 000000000000..43f68fced0d8
--- /dev/null
+++ b/src/a11y-demo/BUILD.bazel
@@ -0,0 +1,19 @@
+package(default_visibility=["//visibility:public"])
+
+load("//:packages.bzl", "MATERIAL_TARGETS")
+load("//tools:defaults.bzl", "ng_module")
+load("//tools:sass_generate_binaries.bzl", "sass_generate_binaries")
+
+# Generate sass binaries for all nested SCSS files.
+sass_generate_binaries("a11y_demo_scss", glob(["**/*.scss"]))
+
+ng_module(
+  name = "a11y-demo",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  assets = glob(["**/*.html"]) + [":a11y_demo_scss"],
+  deps = [
+    "@angular//packages/core",
+    "@angular//packages/router",
+    "//src/cdk/table",
+  ] + MATERIAL_TARGETS
+)
diff --git a/src/demo-app/a11y/a11y-module.ts b/src/a11y-demo/a11y-demo-module.ts
similarity index 94%
rename from src/demo-app/a11y/a11y-module.ts
rename to src/a11y-demo/a11y-demo-module.ts
index 837e1e8f9a50..9f04ce2df240 100644
--- a/src/demo-app/a11y/a11y-module.ts
+++ b/src/a11y-demo/a11y-demo-module.ts
@@ -10,8 +10,9 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {DemoMaterialModule} from '../demo-material-module';
-import {AccessibilityDemo, AccessibilityHome} from './a11y';
+import {AccessibilityDemoHome, AccessibilityDemoRoot} from './a11y-demo';
+import {ACCESSIBILITY_DEMO_ROUTES} from './a11y-demo-routes';
+import {DemoMaterialModule} from './a11y-material-module';
 import {AutocompleteAccessibilityDemo} from './autocomplete/autocomplete-a11y';
 import {ButtonToggleAccessibilityDemo} from './button-toggle/button-toggle-a11y';
 import {ButtonAccessibilityDemo} from './button/button-a11y';
@@ -36,7 +37,6 @@ import {MenuAccessibilityDemo} from './menu/menu-a11y';
 import {ProgressBarAccessibilityDemo} from './progress-bar/progress-bar-a11y';
 import {ProgressSpinnerAccessibilityDemo} from './progress-spinner/progress-spinner-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
-import {ACCESSIBILITY_DEMO_ROUTES} from './routes';
 import {SelectAccessibilityDemo} from './select/select-a11y';
 import {SidenavBasicAccessibilityDemo} from './sidenav/basic-sidenav-a11y';
 import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
@@ -75,8 +75,8 @@ export class AccessibilityRoutingModule {}
     ReactiveFormsModule,
   ],
   declarations: [
-    AccessibilityDemo,
-    AccessibilityHome,
+    AccessibilityDemoHome,
+    AccessibilityDemoRoot,
     AutocompleteAccessibilityDemo,
     ButtonAccessibilityDemo,
     ButtonToggleAccessibilityDemo,
diff --git a/src/demo-app/a11y/routes.ts b/src/a11y-demo/a11y-demo-routes.ts
similarity index 97%
rename from src/demo-app/a11y/routes.ts
rename to src/a11y-demo/a11y-demo-routes.ts
index 8ce0372611af..62ca8cb55c8b 100644
--- a/src/demo-app/a11y/routes.ts
+++ b/src/a11y-demo/a11y-demo-routes.ts
@@ -17,7 +17,7 @@ import {DialogAccessibilityDemo} from './dialog/dialog-a11y';
 import {ExpansionPanelAccessibilityDemo} from './expansion/expansion-a11y';
 import {GridListAccessibilityDemo} from './grid-list/grid-list-a11y';
 import {RadioAccessibilityDemo} from './radio/radio-a11y';
-import {AccessibilityHome} from './a11y';
+import {AccessibilityDemoHome} from './a11y-demo';
 import {ToolbarAccessibilityDemo} from './toolbar/toolbar-a11y';
 import {DatepickerAccessibilityDemo} from './datepicker/datepicker-a11y';
 import {IconAccessibilityDemo} from './icon/icon-a11y';
@@ -40,7 +40,7 @@ import {SidenavDualAccessibilityDemo} from './sidenav/dual-sidenav-a11y';
 import {SidenavMobileAccessibilityDemo} from './sidenav/mobile-sidenav-a11y';
 
 export const ACCESSIBILITY_DEMO_ROUTES: Routes = [
-  {path: '', component: AccessibilityHome},
+  {path: '', component: AccessibilityDemoHome},
   {path: 'autocomplete', component: AutocompleteAccessibilityDemo},
   {path: 'button', component: ButtonAccessibilityDemo},
   {path: 'button-toggle', component: ButtonToggleAccessibilityDemo},
diff --git a/src/demo-app/a11y/a11y.html b/src/a11y-demo/a11y-demo.html
similarity index 100%
rename from src/demo-app/a11y/a11y.html
rename to src/a11y-demo/a11y-demo.html
diff --git a/src/demo-app/a11y/a11y.scss b/src/a11y-demo/a11y-demo.scss
similarity index 100%
rename from src/demo-app/a11y/a11y.scss
rename to src/a11y-demo/a11y-demo.scss
diff --git a/src/demo-app/a11y/a11y.ts b/src/a11y-demo/a11y-demo.ts
similarity index 91%
rename from src/demo-app/a11y/a11y.ts
rename to src/a11y-demo/a11y-demo.ts
index 988634dc684b..8797fc221e2f 100644
--- a/src/demo-app/a11y/a11y.ts
+++ b/src/a11y-demo/a11y-demo.ts
@@ -10,23 +10,13 @@ import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {NavigationEnd, Router} from '@angular/router';
 import {Subscription} from 'rxjs';
 
-
-@Component({
-  moduleId: module.id,
-  selector: 'accessibility-home',
-  template: `<p>Welcome to the accessibility demos for Angular Material!</p>`,
-})
-export class AccessibilityHome {}
-
 @Component({
   moduleId: module.id,
-  selector: 'accessibility-demo',
-  templateUrl: 'a11y.html',
-  styleUrls: ['a11y.css'],
+  templateUrl: 'a11y-demo.html',
+  styleUrls: ['a11y-demo.css'],
 })
-export class AccessibilityDemo implements OnDestroy {
+export class AccessibilityDemoRoot implements OnDestroy {
   currentComponent = '';
-
   fullscreen = false;
 
   private _routerSubscription = Subscription.EMPTY;
@@ -90,3 +80,10 @@ export class AccessibilityDemo implements OnDestroy {
     this._routerSubscription.unsubscribe();
   }
 }
+
+@Component({
+  moduleId: module.id,
+  selector: 'accessibility-home',
+  template: `<p>Welcome to the accessibility examples for Angular Material!</p>`,
+})
+export class AccessibilityDemoHome {}
diff --git a/src/a11y-demo/a11y-material-module.ts b/src/a11y-demo/a11y-material-module.ts
new file mode 100644
index 000000000000..3c799931817c
--- /dev/null
+++ b/src/a11y-demo/a11y-material-module.ts
@@ -0,0 +1,77 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {CdkTableModule} from '@angular/cdk/table';
+import {NgModule} from '@angular/core';
+import {
+  MatAutocompleteModule,
+  MatButtonModule,
+  MatButtonToggleModule,
+  MatCardModule,
+  MatCheckboxModule,
+  MatChipsModule,
+  MatDatepickerModule,
+  MatDialogModule,
+  MatExpansionModule,
+  MatGridListModule,
+  MatIconModule,
+  MatInputModule,
+  MatListModule,
+  MatMenuModule,
+  MatPaginatorModule,
+  MatProgressBarModule,
+  MatProgressSpinnerModule,
+  MatRadioModule,
+  MatSelectModule,
+  MatSidenavModule,
+  MatSliderModule,
+  MatSlideToggleModule,
+  MatSnackBarModule,
+  MatTableModule,
+  MatTabsModule,
+  MatToolbarModule,
+  MatTooltipModule,
+} from '@angular/material';
+
+/**
+ * NgModule that includes all Material modules that are required to serve the dev-app.
+ */
+@NgModule({
+  exports: [
+    CdkTableModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatButtonToggleModule,
+    MatCardModule,
+    MatCheckboxModule,
+    MatChipsModule,
+    MatTableModule,
+    MatDatepickerModule,
+    MatDialogModule,
+    MatExpansionModule,
+    MatGridListModule,
+    MatIconModule,
+    MatInputModule,
+    MatListModule,
+    MatMenuModule,
+    MatPaginatorModule,
+    MatProgressBarModule,
+    MatProgressSpinnerModule,
+    MatRadioModule,
+    MatSelectModule,
+    MatSidenavModule,
+    MatSliderModule,
+    MatSlideToggleModule,
+    MatSnackBarModule,
+    MatTableModule,
+    MatTabsModule,
+    MatToolbarModule,
+    MatTooltipModule,
+  ]
+})
+export class DemoMaterialModule {}
diff --git a/src/demo-app/a11y/autocomplete/autocomplete-a11y.html b/src/a11y-demo/autocomplete/autocomplete-a11y.html
similarity index 100%
rename from src/demo-app/a11y/autocomplete/autocomplete-a11y.html
rename to src/a11y-demo/autocomplete/autocomplete-a11y.html
diff --git a/src/demo-app/a11y/autocomplete/autocomplete-a11y.scss b/src/a11y-demo/autocomplete/autocomplete-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/autocomplete/autocomplete-a11y.scss
rename to src/a11y-demo/autocomplete/autocomplete-a11y.scss
diff --git a/src/demo-app/a11y/autocomplete/autocomplete-a11y.ts b/src/a11y-demo/autocomplete/autocomplete-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/autocomplete/autocomplete-a11y.ts
rename to src/a11y-demo/autocomplete/autocomplete-a11y.ts
diff --git a/src/demo-app/a11y/button-toggle/button-toggle-a11y.html b/src/a11y-demo/button-toggle/button-toggle-a11y.html
similarity index 100%
rename from src/demo-app/a11y/button-toggle/button-toggle-a11y.html
rename to src/a11y-demo/button-toggle/button-toggle-a11y.html
diff --git a/src/demo-app/a11y/button-toggle/button-toggle-a11y.scss b/src/a11y-demo/button-toggle/button-toggle-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/button-toggle/button-toggle-a11y.scss
rename to src/a11y-demo/button-toggle/button-toggle-a11y.scss
diff --git a/src/demo-app/a11y/button-toggle/button-toggle-a11y.ts b/src/a11y-demo/button-toggle/button-toggle-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/button-toggle/button-toggle-a11y.ts
rename to src/a11y-demo/button-toggle/button-toggle-a11y.ts
diff --git a/src/demo-app/a11y/button/button-a11y.html b/src/a11y-demo/button/button-a11y.html
similarity index 100%
rename from src/demo-app/a11y/button/button-a11y.html
rename to src/a11y-demo/button/button-a11y.html
diff --git a/src/demo-app/a11y/button/button-a11y.scss b/src/a11y-demo/button/button-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/button/button-a11y.scss
rename to src/a11y-demo/button/button-a11y.scss
diff --git a/src/demo-app/a11y/button/button-a11y.ts b/src/a11y-demo/button/button-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/button/button-a11y.ts
rename to src/a11y-demo/button/button-a11y.ts
diff --git a/src/demo-app/a11y/card/assets/dachshund-avatar.jpg b/src/a11y-demo/card/assets/dachshund-avatar.jpg
similarity index 100%
rename from src/demo-app/a11y/card/assets/dachshund-avatar.jpg
rename to src/a11y-demo/card/assets/dachshund-avatar.jpg
diff --git a/src/demo-app/a11y/card/assets/dachshund.jpg b/src/a11y-demo/card/assets/dachshund.jpg
similarity index 100%
rename from src/demo-app/a11y/card/assets/dachshund.jpg
rename to src/a11y-demo/card/assets/dachshund.jpg
diff --git a/src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg b/src/a11y-demo/card/assets/shiba-inu-avatar.jpg
similarity index 100%
rename from src/demo-app/a11y/card/assets/shiba-inu-avatar.jpg
rename to src/a11y-demo/card/assets/shiba-inu-avatar.jpg
diff --git a/src/demo-app/a11y/card/assets/shiba-inu.jpg b/src/a11y-demo/card/assets/shiba-inu.jpg
similarity index 100%
rename from src/demo-app/a11y/card/assets/shiba-inu.jpg
rename to src/a11y-demo/card/assets/shiba-inu.jpg
diff --git a/src/demo-app/a11y/card/card-a11y.html b/src/a11y-demo/card/card-a11y.html
similarity index 100%
rename from src/demo-app/a11y/card/card-a11y.html
rename to src/a11y-demo/card/card-a11y.html
diff --git a/src/demo-app/a11y/card/card-a11y.scss b/src/a11y-demo/card/card-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/card/card-a11y.scss
rename to src/a11y-demo/card/card-a11y.scss
diff --git a/src/demo-app/a11y/card/card-a11y.ts b/src/a11y-demo/card/card-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/card/card-a11y.ts
rename to src/a11y-demo/card/card-a11y.ts
diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.html b/src/a11y-demo/checkbox/checkbox-a11y.html
similarity index 100%
rename from src/demo-app/a11y/checkbox/checkbox-a11y.html
rename to src/a11y-demo/checkbox/checkbox-a11y.html
diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.scss b/src/a11y-demo/checkbox/checkbox-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/checkbox/checkbox-a11y.scss
rename to src/a11y-demo/checkbox/checkbox-a11y.scss
diff --git a/src/demo-app/a11y/checkbox/checkbox-a11y.ts b/src/a11y-demo/checkbox/checkbox-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/checkbox/checkbox-a11y.ts
rename to src/a11y-demo/checkbox/checkbox-a11y.ts
diff --git a/src/demo-app/a11y/chips/chips-a11y.html b/src/a11y-demo/chips/chips-a11y.html
similarity index 100%
rename from src/demo-app/a11y/chips/chips-a11y.html
rename to src/a11y-demo/chips/chips-a11y.html
diff --git a/src/demo-app/a11y/chips/chips-a11y.scss b/src/a11y-demo/chips/chips-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/chips/chips-a11y.scss
rename to src/a11y-demo/chips/chips-a11y.scss
diff --git a/src/demo-app/a11y/chips/chips-a11y.ts b/src/a11y-demo/chips/chips-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/chips/chips-a11y.ts
rename to src/a11y-demo/chips/chips-a11y.ts
diff --git a/src/demo-app/a11y/datepicker/datepicker-a11y.html b/src/a11y-demo/datepicker/datepicker-a11y.html
similarity index 100%
rename from src/demo-app/a11y/datepicker/datepicker-a11y.html
rename to src/a11y-demo/datepicker/datepicker-a11y.html
diff --git a/src/demo-app/a11y/datepicker/datepicker-a11y.scss b/src/a11y-demo/datepicker/datepicker-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/datepicker/datepicker-a11y.scss
rename to src/a11y-demo/datepicker/datepicker-a11y.scss
diff --git a/src/demo-app/a11y/datepicker/datepicker-a11y.ts b/src/a11y-demo/datepicker/datepicker-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/datepicker/datepicker-a11y.ts
rename to src/a11y-demo/datepicker/datepicker-a11y.ts
diff --git a/src/demo-app/a11y/dialog/dialog-a11y.html b/src/a11y-demo/dialog/dialog-a11y.html
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-a11y.html
rename to src/a11y-demo/dialog/dialog-a11y.html
diff --git a/src/demo-app/a11y/dialog/dialog-a11y.scss b/src/a11y-demo/dialog/dialog-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-a11y.scss
rename to src/a11y-demo/dialog/dialog-a11y.scss
diff --git a/src/demo-app/a11y/dialog/dialog-a11y.ts b/src/a11y-demo/dialog/dialog-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-a11y.ts
rename to src/a11y-demo/dialog/dialog-a11y.ts
diff --git a/src/demo-app/a11y/dialog/dialog-address-form-a11y.html b/src/a11y-demo/dialog/dialog-address-form-a11y.html
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-address-form-a11y.html
rename to src/a11y-demo/dialog/dialog-address-form-a11y.html
diff --git a/src/demo-app/a11y/dialog/dialog-fruit-a11y.html b/src/a11y-demo/dialog/dialog-fruit-a11y.html
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-fruit-a11y.html
rename to src/a11y-demo/dialog/dialog-fruit-a11y.html
diff --git a/src/demo-app/a11y/dialog/dialog-neptune-a11y.html b/src/a11y-demo/dialog/dialog-neptune-a11y.html
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-neptune-a11y.html
rename to src/a11y-demo/dialog/dialog-neptune-a11y.html
diff --git a/src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html b/src/a11y-demo/dialog/dialog-neptune-iframe-a11y.html
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-neptune-iframe-a11y.html
rename to src/a11y-demo/dialog/dialog-neptune-iframe-a11y.html
diff --git a/src/demo-app/a11y/dialog/dialog-welcome-a11y.html b/src/a11y-demo/dialog/dialog-welcome-a11y.html
similarity index 100%
rename from src/demo-app/a11y/dialog/dialog-welcome-a11y.html
rename to src/a11y-demo/dialog/dialog-welcome-a11y.html
diff --git a/src/demo-app/a11y/expansion/expansion-a11y.html b/src/a11y-demo/expansion/expansion-a11y.html
similarity index 100%
rename from src/demo-app/a11y/expansion/expansion-a11y.html
rename to src/a11y-demo/expansion/expansion-a11y.html
diff --git a/src/demo-app/a11y/expansion/expansion-a11y.scss b/src/a11y-demo/expansion/expansion-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/expansion/expansion-a11y.scss
rename to src/a11y-demo/expansion/expansion-a11y.scss
diff --git a/src/demo-app/a11y/expansion/expansion-a11y.ts b/src/a11y-demo/expansion/expansion-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/expansion/expansion-a11y.ts
rename to src/a11y-demo/expansion/expansion-a11y.ts
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.html b/src/a11y-demo/grid-list/grid-list-a11y.html
similarity index 100%
rename from src/demo-app/a11y/grid-list/grid-list-a11y.html
rename to src/a11y-demo/grid-list/grid-list-a11y.html
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.scss b/src/a11y-demo/grid-list/grid-list-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/grid-list/grid-list-a11y.scss
rename to src/a11y-demo/grid-list/grid-list-a11y.scss
diff --git a/src/demo-app/a11y/grid-list/grid-list-a11y.ts b/src/a11y-demo/grid-list/grid-list-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/grid-list/grid-list-a11y.ts
rename to src/a11y-demo/grid-list/grid-list-a11y.ts
diff --git a/src/demo-app/a11y/icon/icon-a11y.html b/src/a11y-demo/icon/icon-a11y.html
similarity index 100%
rename from src/demo-app/a11y/icon/icon-a11y.html
rename to src/a11y-demo/icon/icon-a11y.html
diff --git a/src/demo-app/a11y/icon/icon-a11y.ts b/src/a11y-demo/icon/icon-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/icon/icon-a11y.ts
rename to src/a11y-demo/icon/icon-a11y.ts
diff --git a/src/demo-app/a11y/input/input-a11y.html b/src/a11y-demo/input/input-a11y.html
similarity index 100%
rename from src/demo-app/a11y/input/input-a11y.html
rename to src/a11y-demo/input/input-a11y.html
diff --git a/src/demo-app/a11y/input/input-a11y.ts b/src/a11y-demo/input/input-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/input/input-a11y.ts
rename to src/a11y-demo/input/input-a11y.ts
diff --git a/src/demo-app/a11y/list/list-a11y.html b/src/a11y-demo/list/list-a11y.html
similarity index 100%
rename from src/demo-app/a11y/list/list-a11y.html
rename to src/a11y-demo/list/list-a11y.html
diff --git a/src/demo-app/a11y/list/list-a11y.scss b/src/a11y-demo/list/list-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/list/list-a11y.scss
rename to src/a11y-demo/list/list-a11y.scss
diff --git a/src/demo-app/a11y/list/list-a11y.ts b/src/a11y-demo/list/list-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/list/list-a11y.ts
rename to src/a11y-demo/list/list-a11y.ts
diff --git a/src/demo-app/a11y/menu/menu-a11y.html b/src/a11y-demo/menu/menu-a11y.html
similarity index 100%
rename from src/demo-app/a11y/menu/menu-a11y.html
rename to src/a11y-demo/menu/menu-a11y.html
diff --git a/src/demo-app/a11y/menu/menu-a11y.scss b/src/a11y-demo/menu/menu-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/menu/menu-a11y.scss
rename to src/a11y-demo/menu/menu-a11y.scss
diff --git a/src/demo-app/a11y/menu/menu-a11y.ts b/src/a11y-demo/menu/menu-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/menu/menu-a11y.ts
rename to src/a11y-demo/menu/menu-a11y.ts
diff --git a/src/demo-app/a11y/progress-bar/progress-bar-a11y.html b/src/a11y-demo/progress-bar/progress-bar-a11y.html
similarity index 100%
rename from src/demo-app/a11y/progress-bar/progress-bar-a11y.html
rename to src/a11y-demo/progress-bar/progress-bar-a11y.html
diff --git a/src/demo-app/a11y/progress-bar/progress-bar-a11y.ts b/src/a11y-demo/progress-bar/progress-bar-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/progress-bar/progress-bar-a11y.ts
rename to src/a11y-demo/progress-bar/progress-bar-a11y.ts
diff --git a/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html b/src/a11y-demo/progress-spinner/progress-spinner-a11y.html
similarity index 100%
rename from src/demo-app/a11y/progress-spinner/progress-spinner-a11y.html
rename to src/a11y-demo/progress-spinner/progress-spinner-a11y.html
diff --git a/src/demo-app/a11y/progress-spinner/progress-spinner-a11y.ts b/src/a11y-demo/progress-spinner/progress-spinner-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/progress-spinner/progress-spinner-a11y.ts
rename to src/a11y-demo/progress-spinner/progress-spinner-a11y.ts
diff --git a/src/demo-app/a11y/radio/radio-a11y.html b/src/a11y-demo/radio/radio-a11y.html
similarity index 100%
rename from src/demo-app/a11y/radio/radio-a11y.html
rename to src/a11y-demo/radio/radio-a11y.html
diff --git a/src/demo-app/a11y/radio/radio-a11y.scss b/src/a11y-demo/radio/radio-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/radio/radio-a11y.scss
rename to src/a11y-demo/radio/radio-a11y.scss
diff --git a/src/demo-app/a11y/radio/radio-a11y.ts b/src/a11y-demo/radio/radio-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/radio/radio-a11y.ts
rename to src/a11y-demo/radio/radio-a11y.ts
diff --git a/src/demo-app/a11y/select/select-a11y.html b/src/a11y-demo/select/select-a11y.html
similarity index 100%
rename from src/demo-app/a11y/select/select-a11y.html
rename to src/a11y-demo/select/select-a11y.html
diff --git a/src/demo-app/a11y/select/select-a11y.scss b/src/a11y-demo/select/select-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/select/select-a11y.scss
rename to src/a11y-demo/select/select-a11y.scss
diff --git a/src/demo-app/a11y/select/select-a11y.ts b/src/a11y-demo/select/select-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/select/select-a11y.ts
rename to src/a11y-demo/select/select-a11y.ts
diff --git a/src/demo-app/a11y/sidenav/basic-sidenav-a11y.html b/src/a11y-demo/sidenav/basic-sidenav-a11y.html
similarity index 100%
rename from src/demo-app/a11y/sidenav/basic-sidenav-a11y.html
rename to src/a11y-demo/sidenav/basic-sidenav-a11y.html
diff --git a/src/demo-app/a11y/sidenav/basic-sidenav-a11y.ts b/src/a11y-demo/sidenav/basic-sidenav-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/sidenav/basic-sidenav-a11y.ts
rename to src/a11y-demo/sidenav/basic-sidenav-a11y.ts
diff --git a/src/demo-app/a11y/sidenav/dual-sidenav-a11y.html b/src/a11y-demo/sidenav/dual-sidenav-a11y.html
similarity index 100%
rename from src/demo-app/a11y/sidenav/dual-sidenav-a11y.html
rename to src/a11y-demo/sidenav/dual-sidenav-a11y.html
diff --git a/src/demo-app/a11y/sidenav/dual-sidenav-a11y.scss b/src/a11y-demo/sidenav/dual-sidenav-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/sidenav/dual-sidenav-a11y.scss
rename to src/a11y-demo/sidenav/dual-sidenav-a11y.scss
diff --git a/src/demo-app/a11y/sidenav/dual-sidenav-a11y.ts b/src/a11y-demo/sidenav/dual-sidenav-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/sidenav/dual-sidenav-a11y.ts
rename to src/a11y-demo/sidenav/dual-sidenav-a11y.ts
diff --git a/src/demo-app/a11y/sidenav/mobile-sidenav-a11y.html b/src/a11y-demo/sidenav/mobile-sidenav-a11y.html
similarity index 100%
rename from src/demo-app/a11y/sidenav/mobile-sidenav-a11y.html
rename to src/a11y-demo/sidenav/mobile-sidenav-a11y.html
diff --git a/src/demo-app/a11y/sidenav/mobile-sidenav-a11y.scss b/src/a11y-demo/sidenav/mobile-sidenav-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/sidenav/mobile-sidenav-a11y.scss
rename to src/a11y-demo/sidenav/mobile-sidenav-a11y.scss
diff --git a/src/demo-app/a11y/sidenav/mobile-sidenav-a11y.ts b/src/a11y-demo/sidenav/mobile-sidenav-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/sidenav/mobile-sidenav-a11y.ts
rename to src/a11y-demo/sidenav/mobile-sidenav-a11y.ts
diff --git a/src/demo-app/a11y/sidenav/shared.scss b/src/a11y-demo/sidenav/shared.scss
similarity index 100%
rename from src/demo-app/a11y/sidenav/shared.scss
rename to src/a11y-demo/sidenav/shared.scss
diff --git a/src/demo-app/a11y/sidenav/sidenav-a11y.html b/src/a11y-demo/sidenav/sidenav-a11y.html
similarity index 100%
rename from src/demo-app/a11y/sidenav/sidenav-a11y.html
rename to src/a11y-demo/sidenav/sidenav-a11y.html
diff --git a/src/demo-app/a11y/sidenav/sidenav-a11y.ts b/src/a11y-demo/sidenav/sidenav-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/sidenav/sidenav-a11y.ts
rename to src/a11y-demo/sidenav/sidenav-a11y.ts
diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html b/src/a11y-demo/slide-toggle/slide-toggle-a11y.html
similarity index 100%
rename from src/demo-app/a11y/slide-toggle/slide-toggle-a11y.html
rename to src/a11y-demo/slide-toggle/slide-toggle-a11y.html
diff --git a/src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts b/src/a11y-demo/slide-toggle/slide-toggle-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/slide-toggle/slide-toggle-a11y.ts
rename to src/a11y-demo/slide-toggle/slide-toggle-a11y.ts
diff --git a/src/demo-app/a11y/slider/slider-a11y.html b/src/a11y-demo/slider/slider-a11y.html
similarity index 100%
rename from src/demo-app/a11y/slider/slider-a11y.html
rename to src/a11y-demo/slider/slider-a11y.html
diff --git a/src/demo-app/a11y/slider/slider-a11y.scss b/src/a11y-demo/slider/slider-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/slider/slider-a11y.scss
rename to src/a11y-demo/slider/slider-a11y.scss
diff --git a/src/demo-app/a11y/slider/slider-a11y.ts b/src/a11y-demo/slider/slider-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/slider/slider-a11y.ts
rename to src/a11y-demo/slider/slider-a11y.ts
diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.html b/src/a11y-demo/snack-bar/snack-bar-a11y.html
similarity index 100%
rename from src/demo-app/a11y/snack-bar/snack-bar-a11y.html
rename to src/a11y-demo/snack-bar/snack-bar-a11y.html
diff --git a/src/demo-app/a11y/snack-bar/snack-bar-a11y.ts b/src/a11y-demo/snack-bar/snack-bar-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/snack-bar/snack-bar-a11y.ts
rename to src/a11y-demo/snack-bar/snack-bar-a11y.ts
diff --git a/src/demo-app/a11y/table/table-a11y.html b/src/a11y-demo/table/table-a11y.html
similarity index 100%
rename from src/demo-app/a11y/table/table-a11y.html
rename to src/a11y-demo/table/table-a11y.html
diff --git a/src/demo-app/a11y/table/table-a11y.scss b/src/a11y-demo/table/table-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/table/table-a11y.scss
rename to src/a11y-demo/table/table-a11y.scss
diff --git a/src/demo-app/a11y/table/table-a11y.ts b/src/a11y-demo/table/table-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/table/table-a11y.ts
rename to src/a11y-demo/table/table-a11y.ts
diff --git a/src/demo-app/a11y/tabs/routes.ts b/src/a11y-demo/tabs/routes.ts
similarity index 100%
rename from src/demo-app/a11y/tabs/routes.ts
rename to src/a11y-demo/tabs/routes.ts
diff --git a/src/demo-app/a11y/tabs/tabs-a11y.html b/src/a11y-demo/tabs/tabs-a11y.html
similarity index 100%
rename from src/demo-app/a11y/tabs/tabs-a11y.html
rename to src/a11y-demo/tabs/tabs-a11y.html
diff --git a/src/demo-app/a11y/tabs/tabs-a11y.scss b/src/a11y-demo/tabs/tabs-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/tabs/tabs-a11y.scss
rename to src/a11y-demo/tabs/tabs-a11y.scss
diff --git a/src/demo-app/a11y/tabs/tabs-a11y.ts b/src/a11y-demo/tabs/tabs-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/tabs/tabs-a11y.ts
rename to src/a11y-demo/tabs/tabs-a11y.ts
diff --git a/src/demo-app/a11y/toolbar/toolbar-a11y.html b/src/a11y-demo/toolbar/toolbar-a11y.html
similarity index 100%
rename from src/demo-app/a11y/toolbar/toolbar-a11y.html
rename to src/a11y-demo/toolbar/toolbar-a11y.html
diff --git a/src/demo-app/a11y/toolbar/toolbar-a11y.scss b/src/a11y-demo/toolbar/toolbar-a11y.scss
similarity index 100%
rename from src/demo-app/a11y/toolbar/toolbar-a11y.scss
rename to src/a11y-demo/toolbar/toolbar-a11y.scss
diff --git a/src/demo-app/a11y/toolbar/toolbar-a11y.ts b/src/a11y-demo/toolbar/toolbar-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/toolbar/toolbar-a11y.ts
rename to src/a11y-demo/toolbar/toolbar-a11y.ts
diff --git a/src/demo-app/a11y/tooltip/tooltip-a11y.html b/src/a11y-demo/tooltip/tooltip-a11y.html
similarity index 96%
rename from src/demo-app/a11y/tooltip/tooltip-a11y.html
rename to src/a11y-demo/tooltip/tooltip-a11y.html
index 699f019dfcee..f45c382b3fe0 100644
--- a/src/demo-app/a11y/tooltip/tooltip-a11y.html
+++ b/src/a11y-demo/tooltip/tooltip-a11y.html
@@ -1,45 +1,45 @@
-<section>
-  <h2>Mouse over or tab to trigger a tooltip</h2>
-  <p>Mouse over or focus the button to show and hide the tooltip</p>
-  <button mat-raised-button matTooltip="This is an example of a tooltip">What is this?</button>
-</section>
-
-
-<section>
-  <h2>Click to trigger a tooltip</h2>
-  <button mat-raised-button (click)="tooltip.toggle(); $event.stopPropagation()">Toggle the tooltip</button>
-  <button mat-raised-button matTooltip="This is a tooltip that shows on click" #tooltip="matTooltip">I have a tooltip</button>
-</section>
-
-
-<section>
-  <h2>Different tooltip positions</h2>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears below the trigger"
-    matTooltipPosition="below">Below</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears above the trigger"
-    matTooltipPosition="above">Above</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears to the left of the trigger"
-    matTooltipPosition="left">Left</button>
-
-  <button
-    mat-raised-button
-    matTooltip="This tooltip appears to the right of the trigger"
-    matTooltipPosition="right">Right</button>
-</section>
-
-<section>
-  <h2>Delayed tooltip</h2>
-  <button
-    mat-raised-button
-    matTooltip="This tooltip will show up after a delay"
-    [matTooltipShowDelay]="2000">What is this?</button>
-</section>
+<section>
+  <h2>Mouse over or tab to trigger a tooltip</h2>
+  <p>Mouse over or focus the button to show and hide the tooltip</p>
+  <button mat-raised-button matTooltip="This is an example of a tooltip">What is this?</button>
+</section>
+
+
+<section>
+  <h2>Click to trigger a tooltip</h2>
+  <button mat-raised-button (click)="tooltip.toggle(); $event.stopPropagation()">Toggle the tooltip</button>
+  <button mat-raised-button matTooltip="This is a tooltip that shows on click" #tooltip="matTooltip">I have a tooltip</button>
+</section>
+
+
+<section>
+  <h2>Different tooltip positions</h2>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears below the trigger"
+    matTooltipPosition="below">Below</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears above the trigger"
+    matTooltipPosition="above">Above</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears to the left of the trigger"
+    matTooltipPosition="left">Left</button>
+
+  <button
+    mat-raised-button
+    matTooltip="This tooltip appears to the right of the trigger"
+    matTooltipPosition="right">Right</button>
+</section>
+
+<section>
+  <h2>Delayed tooltip</h2>
+  <button
+    mat-raised-button
+    matTooltip="This tooltip will show up after a delay"
+    [matTooltipShowDelay]="2000">What is this?</button>
+</section>
diff --git a/src/demo-app/a11y/tooltip/tooltip-a11y.ts b/src/a11y-demo/tooltip/tooltip-a11y.ts
similarity index 100%
rename from src/demo-app/a11y/tooltip/tooltip-a11y.ts
rename to src/a11y-demo/tooltip/tooltip-a11y.ts
diff --git a/src/demo-app/demo-app-module.ts b/src/demo-app/demo-app-module.ts
deleted file mode 100644
index 5e42bbf01d24..000000000000
--- a/src/demo-app/demo-app-module.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {ApplicationRef, NgModule} from '@angular/core';
-import {BrowserModule} from '@angular/platform-browser';
-import {HttpClientModule} from '@angular/common/http';
-import {RouterModule} from '@angular/router';
-import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {ALL_ROUTES} from './demo-app/routes';
-import {EntryApp} from './demo-app/demo-app';
-import {DemoModule} from './demo-app/demo-module';
-import {AccessibilityDemoModule} from './a11y/a11y-module';
-
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    HttpClientModule,
-    DemoModule,
-    AccessibilityDemoModule,
-    RouterModule.forRoot(ALL_ROUTES),
-  ],
-  declarations: [
-    EntryApp,
-  ],
-  entryComponents: [
-    EntryApp,
-  ]
-})
-export class DemoAppModule {
-  constructor(private _appRef: ApplicationRef) { }
-
-  ngDoBootstrap() {
-    this._appRef.bootstrap(EntryApp);
-  }
-}
diff --git a/src/demo-app/demo-app/demo-module.ts b/src/demo-app/demo-app/demo-module.ts
deleted file mode 100644
index a1bf00cfe17d..000000000000
--- a/src/demo-app/demo-app/demo-module.ts
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {LayoutModule} from '@angular/cdk/layout';
-import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
-import {CommonModule} from '@angular/common';
-import {Injector, NgModule} from '@angular/core';
-import {createCustomElement} from '@angular/elements';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
-import {RouterModule} from '@angular/router';
-
-import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
-import {BadgeDemo} from '../badge/badge-demo';
-import {BaselineDemo} from '../baseline/baseline-demo';
-import {BottomSheetDemo, ExampleBottomSheet} from '../bottom-sheet/bottom-sheet-demo';
-import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
-import {ButtonDemo} from '../button/button-demo';
-import {CardDemo} from '../card/card-demo';
-import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from '../checkbox/checkbox-demo';
-import {ChipsDemo} from '../chips/chips-demo';
-import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
-import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from '../datepicker/datepicker-demo';
-import {DemoMaterialModule} from '../demo-material-module';
-import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from '../dialog/dialog-demo';
-import {DrawerDemo} from '../drawer/drawer-demo';
-import {MaterialExampleModule} from '../example/example-module';
-import {ExamplesPage} from '../examples-page/examples-page';
-import {ExpansionDemo} from '../expansion/expansion-demo';
-import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
-import {GesturesDemo} from '../gestures/gestures-demo';
-import {GridListDemo} from '../grid-list/grid-list-demo';
-import {IconDemo} from '../icon/icon-demo';
-import {InputDemo} from '../input/input-demo';
-import {ListDemo} from '../list/list-demo';
-import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
-import {MenuDemo} from '../menu/menu-demo';
-import {PaginatorDemo} from '../paginator/paginator-demo';
-import {PlatformDemo} from '../platform/platform-demo';
-import {PortalDemo, ScienceJoke} from '../portal/portal-demo';
-import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
-import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
-import {RadioDemo} from '../radio/radio-demo';
-import {RippleDemo} from '../ripple/ripple-demo';
-import {ScreenTypeDemo} from '../screen-type/screen-type-demo';
-import {SelectDemo} from '../select/select-demo';
-import {SidenavDemo} from '../sidenav/sidenav-demo';
-import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
-import {SliderDemo} from '../slider/slider-demo';
-import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
-import {StepperDemo} from '../stepper/stepper-demo';
-import {TableDemoModule} from '../table/table-demo-module';
-import {TabsDemo} from '../tabs/tabs-demo';
-import {ToolbarDemo} from '../toolbar/toolbar-demo';
-import {TooltipDemo} from '../tooltip/tooltip-demo';
-import {TreeDemoModule} from '../tree/tree-demo-module';
-import {TypographyDemo} from '../typography/typography-demo';
-import {VirtualScrollDemo} from '../virtual-scroll/virtual-scroll-demo';
-import {DemoApp, Home} from './demo-app';
-import {DEMO_APP_ROUTES} from './routes';
-import {DragAndDropDemo} from '../drag-drop/drag-drop-demo';
-
-@NgModule({
-  imports: [
-    MaterialExampleModule,
-    ExampleModule,
-    CommonModule,
-    FormsModule,
-    ReactiveFormsModule,
-    RouterModule.forChild(DEMO_APP_ROUTES),
-    DemoMaterialModule,
-    LayoutModule,
-    TableDemoModule,
-    TreeDemoModule,
-  ],
-  declarations: [
-    ExamplesPage,
-    AutocompleteDemo,
-    BadgeDemo,
-    BaselineDemo,
-    BottomSheetDemo,
-    ButtonDemo,
-    ButtonToggleDemo,
-    CardDemo,
-    CheckboxDemo,
-    ChipsDemo,
-    ConnectedOverlayDemo,
-    ContentElementDialog,
-    CustomHeader,
-    CustomHeaderNgContent,
-    DatepickerDemo,
-    DemoApp,
-    DialogDemo,
-    DrawerDemo,
-    ExampleBottomSheet,
-    DragAndDropDemo,
-    ExpansionDemo,
-    FocusOriginDemo,
-    GesturesDemo,
-    GridListDemo,
-    Home,
-    IFrameDialog,
-    IconDemo,
-    InputDemo,
-    JazzDialog,
-    ListDemo,
-    LiveAnnouncerDemo,
-    MatCheckboxDemoNestedChecklist,
-    MenuDemo,
-    PaginatorDemo,
-    PlatformDemo,
-    PortalDemo,
-    ProgressBarDemo,
-    ProgressSpinnerDemo,
-    RadioDemo,
-    RippleDemo,
-    ScienceJoke,
-    ScreenTypeDemo,
-    SelectDemo,
-    SidenavDemo,
-    SlideToggleDemo,
-    SliderDemo,
-    SnackBarDemo,
-    StepperDemo,
-    TabsDemo,
-    ToolbarDemo,
-    TooltipDemo,
-    TypographyDemo,
-    VirtualScrollDemo,
-  ],
-  providers: [
-    {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
-  ],
-  entryComponents: [
-    ContentElementDialog,
-    CustomHeader,
-    CustomHeaderNgContent,
-    DemoApp,
-    ExampleBottomSheet,
-    IFrameDialog,
-    JazzDialog,
-    ScienceJoke,
-  ],
-})
-export class DemoModule {
-  constructor(injector: Injector) {
-    // Register examples as custom elements so that they can be inserted into the DOM dynamically
-    Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
-      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
-      customElements.define(key, element);
-    });
-  }
-}
diff --git a/src/demo-app/demo-app/routes.ts b/src/demo-app/demo-app/routes.ts
deleted file mode 100644
index e212766267fa..000000000000
--- a/src/demo-app/demo-app/routes.ts
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * @license
- * Copyright Google LLC All Rights Reserved.
- *
- * Use of this source code is governed by an MIT-style license that can be
- * found in the LICENSE file at https://angular.io/license
- */
-
-import {Routes} from '@angular/router';
-import {AccessibilityDemo} from '../a11y/a11y';
-import {ACCESSIBILITY_DEMO_ROUTES} from '../a11y/routes';
-import {AutocompleteDemo} from '../autocomplete/autocomplete-demo';
-import {BottomSheetDemo} from '../bottom-sheet/bottom-sheet-demo';
-import {BaselineDemo} from '../baseline/baseline-demo';
-import {ButtonToggleDemo} from '../button-toggle/button-toggle-demo';
-import {ButtonDemo} from '../button/button-demo';
-import {CardDemo} from '../card/card-demo';
-import {CheckboxDemo} from '../checkbox/checkbox-demo';
-import {ChipsDemo} from '../chips/chips-demo';
-import {DatepickerDemo} from '../datepicker/datepicker-demo';
-import {DialogDemo} from '../dialog/dialog-demo';
-import {DrawerDemo} from '../drawer/drawer-demo';
-import {ExpansionDemo} from '../expansion/expansion-demo';
-import {FocusOriginDemo} from '../focus-origin/focus-origin-demo';
-import {GesturesDemo} from '../gestures/gestures-demo';
-import {GridListDemo} from '../grid-list/grid-list-demo';
-import {IconDemo} from '../icon/icon-demo';
-import {InputDemo} from '../input/input-demo';
-import {ListDemo} from '../list/list-demo';
-import {LiveAnnouncerDemo} from '../live-announcer/live-announcer-demo';
-import {MenuDemo} from '../menu/menu-demo';
-import {PlatformDemo} from '../platform/platform-demo';
-import {PortalDemo} from '../portal/portal-demo';
-import {ProgressBarDemo} from '../progress-bar/progress-bar-demo';
-import {ProgressSpinnerDemo} from '../progress-spinner/progress-spinner-demo';
-import {RadioDemo} from '../radio/radio-demo';
-import {RippleDemo} from '../ripple/ripple-demo';
-import {ScreenTypeDemo} from '../screen-type/screen-type-demo';
-import {SelectDemo} from '../select/select-demo';
-import {SidenavDemo} from '../sidenav/sidenav-demo';
-import {SlideToggleDemo} from '../slide-toggle/slide-toggle-demo';
-import {SliderDemo} from '../slider/slider-demo';
-import {SnackBarDemo} from '../snack-bar/snack-bar-demo';
-import {StepperDemo} from '../stepper/stepper-demo';
-import {TabsDemo} from '../tabs/tabs-demo';
-import {ToolbarDemo} from '../toolbar/toolbar-demo';
-import {TooltipDemo} from '../tooltip/tooltip-demo';
-import {TreeDemo} from '../tree/tree-demo';
-import {TypographyDemo} from '../typography/typography-demo';
-import {VirtualScrollDemo} from '../virtual-scroll/virtual-scroll-demo';
-import {DemoApp, Home} from './demo-app';
-import {BadgeDemo} from '../badge/badge-demo';
-import {ConnectedOverlayDemo} from '../connected-overlay/connected-overlay-demo';
-import {PaginatorDemo} from '../paginator/paginator-demo';
-
-import {ExamplesPage} from '../examples-page/examples-page';
-import {TableDemo} from '../table/table-demo';
-import {DragAndDropDemo} from '../drag-drop/drag-drop-demo';
-
-export const DEMO_APP_ROUTES: Routes = [
-  {path: '', component: DemoApp, children: [
-    {path: '', component: Home},
-    {path: 'autocomplete', component: AutocompleteDemo},
-    {path: 'badge', component: BadgeDemo},
-    {path: 'bottom-sheet', component: BottomSheetDemo},
-    {path: 'baseline', component: BaselineDemo},
-    {path: 'button', component: ButtonDemo},
-    {path: 'button-toggle', component: ButtonToggleDemo},
-    {path: 'card', component: CardDemo},
-    {path: 'checkbox', component: CheckboxDemo},
-    {path: 'chips', component: ChipsDemo},
-    {path: 'datepicker', component: DatepickerDemo},
-    {path: 'dialog', component: DialogDemo},
-    {path: 'drawer', component: DrawerDemo},
-    {path: 'drag-drop', component: DragAndDropDemo},
-    {path: 'expansion', component: ExpansionDemo},
-    {path: 'focus-origin', component: FocusOriginDemo},
-    {path: 'gestures', component: GesturesDemo},
-    {path: 'grid-list', component: GridListDemo},
-    {path: 'icon', component: IconDemo},
-    {path: 'input', component: InputDemo},
-    {path: 'list', component: ListDemo},
-    {path: 'live-announcer', component: LiveAnnouncerDemo},
-    {path: 'menu', component: MenuDemo},
-    {path: 'paginator', component: PaginatorDemo},
-    {path: 'platform', component: PlatformDemo},
-    {path: 'portal', component: PortalDemo},
-    {path: 'progress-bar', component: ProgressBarDemo},
-    {path: 'progress-spinner', component: ProgressSpinnerDemo},
-    {path: 'radio', component: RadioDemo},
-    {path: 'ripple', component: RippleDemo},
-    {path: 'select', component: SelectDemo},
-    {path: 'sidenav', component: SidenavDemo},
-    {path: 'slide-toggle', component: SlideToggleDemo},
-    {path: 'slider', component: SliderDemo},
-    {path: 'snack-bar', component: SnackBarDemo},
-    {path: 'stepper', component: StepperDemo},
-    {path: 'table', component: TableDemo},
-    {path: 'tabs', component: TabsDemo},
-    {path: 'toolbar', component: ToolbarDemo},
-    {path: 'tooltip', component: TooltipDemo},
-    {path: 'tree', component: TreeDemo},
-    {path: 'typography', component: TypographyDemo},
-    {path: 'expansion', component: ExpansionDemo},
-    {path: 'stepper', component: StepperDemo},
-    {path: 'screen-type', component: ScreenTypeDemo},
-    {path: 'connected-overlay', component: ConnectedOverlayDemo},
-    {path: 'virtual-scroll', component: VirtualScrollDemo},
-    {path: 'examples', component: ExamplesPage},
-  ]}
-];
-
-export const ALL_ROUTES: Routes = [
-  {path: '',  component: DemoApp, children: DEMO_APP_ROUTES},
-  {path: 'accessibility', component: AccessibilityDemo, children: ACCESSIBILITY_DEMO_ROUTES},
-];
diff --git a/src/demo-app/autocomplete/autocomplete-demo.html b/src/dev-app/autocomplete/autocomplete-demo.html
similarity index 100%
rename from src/demo-app/autocomplete/autocomplete-demo.html
rename to src/dev-app/autocomplete/autocomplete-demo.html
diff --git a/src/demo-app/autocomplete/autocomplete-demo.scss b/src/dev-app/autocomplete/autocomplete-demo.scss
similarity index 100%
rename from src/demo-app/autocomplete/autocomplete-demo.scss
rename to src/dev-app/autocomplete/autocomplete-demo.scss
diff --git a/src/demo-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts
similarity index 100%
rename from src/demo-app/autocomplete/autocomplete-demo.ts
rename to src/dev-app/autocomplete/autocomplete-demo.ts
diff --git a/src/demo-app/badge/badge-demo.html b/src/dev-app/badge/badge-demo.html
similarity index 100%
rename from src/demo-app/badge/badge-demo.html
rename to src/dev-app/badge/badge-demo.html
diff --git a/src/demo-app/badge/badge-demo.scss b/src/dev-app/badge/badge-demo.scss
similarity index 100%
rename from src/demo-app/badge/badge-demo.scss
rename to src/dev-app/badge/badge-demo.scss
diff --git a/src/demo-app/badge/badge-demo.ts b/src/dev-app/badge/badge-demo.ts
similarity index 100%
rename from src/demo-app/badge/badge-demo.ts
rename to src/dev-app/badge/badge-demo.ts
diff --git a/src/demo-app/baseline/baseline-demo.html b/src/dev-app/baseline/baseline-demo.html
similarity index 100%
rename from src/demo-app/baseline/baseline-demo.html
rename to src/dev-app/baseline/baseline-demo.html
diff --git a/src/demo-app/baseline/baseline-demo.scss b/src/dev-app/baseline/baseline-demo.scss
similarity index 100%
rename from src/demo-app/baseline/baseline-demo.scss
rename to src/dev-app/baseline/baseline-demo.scss
diff --git a/src/demo-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts
similarity index 100%
rename from src/demo-app/baseline/baseline-demo.ts
rename to src/dev-app/baseline/baseline-demo.ts
diff --git a/src/demo-app/bottom-sheet/bottom-sheet-demo.html b/src/dev-app/bottom-sheet/bottom-sheet-demo.html
similarity index 100%
rename from src/demo-app/bottom-sheet/bottom-sheet-demo.html
rename to src/dev-app/bottom-sheet/bottom-sheet-demo.html
diff --git a/src/demo-app/bottom-sheet/bottom-sheet-demo.scss b/src/dev-app/bottom-sheet/bottom-sheet-demo.scss
similarity index 100%
rename from src/demo-app/bottom-sheet/bottom-sheet-demo.scss
rename to src/dev-app/bottom-sheet/bottom-sheet-demo.scss
diff --git a/src/demo-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts
similarity index 100%
rename from src/demo-app/bottom-sheet/bottom-sheet-demo.ts
rename to src/dev-app/bottom-sheet/bottom-sheet-demo.ts
diff --git a/src/demo-app/button-toggle/button-toggle-demo.html b/src/dev-app/button-toggle/button-toggle-demo.html
similarity index 100%
rename from src/demo-app/button-toggle/button-toggle-demo.html
rename to src/dev-app/button-toggle/button-toggle-demo.html
diff --git a/src/demo-app/button-toggle/button-toggle-demo.scss b/src/dev-app/button-toggle/button-toggle-demo.scss
similarity index 100%
rename from src/demo-app/button-toggle/button-toggle-demo.scss
rename to src/dev-app/button-toggle/button-toggle-demo.scss
diff --git a/src/demo-app/button-toggle/button-toggle-demo.ts b/src/dev-app/button-toggle/button-toggle-demo.ts
similarity index 100%
rename from src/demo-app/button-toggle/button-toggle-demo.ts
rename to src/dev-app/button-toggle/button-toggle-demo.ts
diff --git a/src/demo-app/button/button-demo.html b/src/dev-app/button/button-demo.html
similarity index 100%
rename from src/demo-app/button/button-demo.html
rename to src/dev-app/button/button-demo.html
diff --git a/src/demo-app/button/button-demo.scss b/src/dev-app/button/button-demo.scss
similarity index 100%
rename from src/demo-app/button/button-demo.scss
rename to src/dev-app/button/button-demo.scss
diff --git a/src/demo-app/button/button-demo.ts b/src/dev-app/button/button-demo.ts
similarity index 100%
rename from src/demo-app/button/button-demo.ts
rename to src/dev-app/button/button-demo.ts
diff --git a/src/demo-app/card/card-demo.html b/src/dev-app/card/card-demo.html
similarity index 100%
rename from src/demo-app/card/card-demo.html
rename to src/dev-app/card/card-demo.html
diff --git a/src/demo-app/card/card-demo.scss b/src/dev-app/card/card-demo.scss
similarity index 100%
rename from src/demo-app/card/card-demo.scss
rename to src/dev-app/card/card-demo.scss
diff --git a/src/demo-app/card/card-demo.ts b/src/dev-app/card/card-demo.ts
similarity index 100%
rename from src/demo-app/card/card-demo.ts
rename to src/dev-app/card/card-demo.ts
diff --git a/src/demo-app/checkbox/checkbox-demo.html b/src/dev-app/checkbox/checkbox-demo.html
similarity index 100%
rename from src/demo-app/checkbox/checkbox-demo.html
rename to src/dev-app/checkbox/checkbox-demo.html
diff --git a/src/demo-app/checkbox/checkbox-demo.scss b/src/dev-app/checkbox/checkbox-demo.scss
similarity index 100%
rename from src/demo-app/checkbox/checkbox-demo.scss
rename to src/dev-app/checkbox/checkbox-demo.scss
diff --git a/src/demo-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts
similarity index 100%
rename from src/demo-app/checkbox/checkbox-demo.ts
rename to src/dev-app/checkbox/checkbox-demo.ts
diff --git a/src/demo-app/checkbox/nested-checklist.html b/src/dev-app/checkbox/nested-checklist.html
similarity index 100%
rename from src/demo-app/checkbox/nested-checklist.html
rename to src/dev-app/checkbox/nested-checklist.html
diff --git a/src/demo-app/chips/chips-demo.html b/src/dev-app/chips/chips-demo.html
similarity index 100%
rename from src/demo-app/chips/chips-demo.html
rename to src/dev-app/chips/chips-demo.html
diff --git a/src/demo-app/chips/chips-demo.scss b/src/dev-app/chips/chips-demo.scss
similarity index 100%
rename from src/demo-app/chips/chips-demo.scss
rename to src/dev-app/chips/chips-demo.scss
diff --git a/src/demo-app/chips/chips-demo.ts b/src/dev-app/chips/chips-demo.ts
similarity index 100%
rename from src/demo-app/chips/chips-demo.ts
rename to src/dev-app/chips/chips-demo.ts
diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.html b/src/dev-app/connected-overlay/connected-overlay-demo.html
similarity index 100%
rename from src/demo-app/connected-overlay/connected-overlay-demo.html
rename to src/dev-app/connected-overlay/connected-overlay-demo.html
diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.scss b/src/dev-app/connected-overlay/connected-overlay-demo.scss
similarity index 100%
rename from src/demo-app/connected-overlay/connected-overlay-demo.scss
rename to src/dev-app/connected-overlay/connected-overlay-demo.scss
diff --git a/src/demo-app/connected-overlay/connected-overlay-demo.ts b/src/dev-app/connected-overlay/connected-overlay-demo.ts
similarity index 100%
rename from src/demo-app/connected-overlay/connected-overlay-demo.ts
rename to src/dev-app/connected-overlay/connected-overlay-demo.ts
diff --git a/src/demo-app/dataset/colors.ts b/src/dev-app/dataset/colors.ts
similarity index 100%
rename from src/demo-app/dataset/colors.ts
rename to src/dev-app/dataset/colors.ts
diff --git a/src/demo-app/dataset/names.ts b/src/dev-app/dataset/names.ts
similarity index 100%
rename from src/demo-app/dataset/names.ts
rename to src/dev-app/dataset/names.ts
diff --git a/src/demo-app/datepicker/custom-header.html b/src/dev-app/datepicker/custom-header.html
similarity index 100%
rename from src/demo-app/datepicker/custom-header.html
rename to src/dev-app/datepicker/custom-header.html
diff --git a/src/demo-app/datepicker/custom-header.scss b/src/dev-app/datepicker/custom-header.scss
similarity index 100%
rename from src/demo-app/datepicker/custom-header.scss
rename to src/dev-app/datepicker/custom-header.scss
diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/dev-app/datepicker/datepicker-demo.html
similarity index 100%
rename from src/demo-app/datepicker/datepicker-demo.html
rename to src/dev-app/datepicker/datepicker-demo.html
diff --git a/src/demo-app/datepicker/datepicker-demo.scss b/src/dev-app/datepicker/datepicker-demo.scss
similarity index 100%
rename from src/demo-app/datepicker/datepicker-demo.scss
rename to src/dev-app/datepicker/datepicker-demo.scss
diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/dev-app/datepicker/datepicker-demo.ts
similarity index 100%
rename from src/demo-app/datepicker/datepicker-demo.ts
rename to src/dev-app/datepicker/datepicker-demo.ts
diff --git a/src/dev-app/dev-app-module.ts b/src/dev-app/dev-app-module.ts
new file mode 100644
index 000000000000..38cc5dfaab5b
--- /dev/null
+++ b/src/dev-app/dev-app-module.ts
@@ -0,0 +1,164 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {LayoutModule} from '@angular/cdk/layout';
+import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';
+import {CommonModule} from '@angular/common';
+import {HttpClientModule} from '@angular/common/http';
+import {Injector, NgModule} from '@angular/core';
+import {createCustomElement} from '@angular/elements';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {EXAMPLE_COMPONENTS, ExampleModule} from '@angular/material-examples';
+import {BrowserModule} from '@angular/platform-browser';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterModule} from '@angular/router';
+import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
+import {BadgeDemo} from './badge/badge-demo';
+import {BaselineDemo} from './baseline/baseline-demo';
+import {BottomSheetDemo, ExampleBottomSheet} from './bottom-sheet/bottom-sheet-demo';
+import {ButtonToggleDemo} from './button-toggle/button-toggle-demo';
+import {ButtonDemo} from './button/button-demo';
+import {CardDemo} from './card/card-demo';
+import {CheckboxDemo, MatCheckboxDemoNestedChecklist} from './checkbox/checkbox-demo';
+import {ChipsDemo} from './chips/chips-demo';
+import {ConnectedOverlayDemo} from './connected-overlay/connected-overlay-demo';
+import {CustomHeader, CustomHeaderNgContent, DatepickerDemo} from './datepicker/datepicker-demo';
+import {DevAppComponent, DevAppHome} from './dev-app';
+import {ContentElementDialog, DialogDemo, IFrameDialog, JazzDialog} from './dialog/dialog-demo';
+import {DragAndDropDemo} from './drag-drop/drag-drop-demo';
+import {DrawerDemo} from './drawer/drawer-demo';
+import {ExamplePageModule} from './example/example-module';
+import {ExamplesPage} from './examples-page/examples-page';
+import {ExpansionDemo} from './expansion/expansion-demo';
+import {FocusOriginDemo} from './focus-origin/focus-origin-demo';
+import {GesturesDemo} from './gestures/gestures-demo';
+import {GridListDemo} from './grid-list/grid-list-demo';
+import {IconDemo} from './icon/icon-demo';
+import {InputDemo} from './input/input-demo';
+import {ListDemo} from './list/list-demo';
+import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
+import {DevAppMaterialModule} from './material-module';
+import {MenuDemo} from './menu/menu-demo';
+import {PaginatorDemo} from './paginator/paginator-demo';
+import {PlatformDemo} from './platform/platform-demo';
+import {PortalDemo, ScienceJoke} from './portal/portal-demo';
+import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
+import {ProgressSpinnerDemo} from './progress-spinner/progress-spinner-demo';
+import {RadioDemo} from './radio/radio-demo';
+import {RippleDemo} from './ripple/ripple-demo';
+import {DEV_APP_ROUTES} from './routes';
+import {ScreenTypeDemo} from './screen-type/screen-type-demo';
+import {SelectDemo} from './select/select-demo';
+import {SidenavDemo} from './sidenav/sidenav-demo';
+import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
+import {SliderDemo} from './slider/slider-demo';
+import {SnackBarDemo} from './snack-bar/snack-bar-demo';
+import {StepperDemo} from './stepper/stepper-demo';
+import {TableDemoModule} from './table/table-demo-module';
+import {TabsDemo} from './tabs/tabs-demo';
+import {ToolbarDemo} from './toolbar/toolbar-demo';
+import {TooltipDemo} from './tooltip/tooltip-demo';
+import {TreeDemoModule} from './tree/tree-demo-module';
+import {TypographyDemo} from './typography/typography-demo';
+import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
+
+@NgModule({
+  imports: [
+    BrowserAnimationsModule,
+    BrowserModule,
+    CommonModule,
+    DevAppMaterialModule,
+    ExampleModule,
+    ExamplePageModule,
+    FormsModule,
+    HttpClientModule,
+    LayoutModule,
+    ReactiveFormsModule,
+    RouterModule.forRoot(DEV_APP_ROUTES),
+    TableDemoModule,
+    TreeDemoModule,
+  ],
+  declarations: [
+    AutocompleteDemo,
+    BadgeDemo,
+    BaselineDemo,
+    BottomSheetDemo,
+    ButtonDemo,
+    ButtonToggleDemo,
+    CardDemo,
+    CheckboxDemo,
+    ChipsDemo,
+    ConnectedOverlayDemo,
+    ContentElementDialog,
+    CustomHeader,
+    CustomHeaderNgContent,
+    DatepickerDemo,
+    DevAppComponent,
+    DevAppHome,
+    DialogDemo,
+    DragAndDropDemo,
+    DrawerDemo,
+    ExampleBottomSheet,
+    ExamplesPage,
+    ExpansionDemo,
+    FocusOriginDemo,
+    GesturesDemo,
+    GridListDemo,
+    IconDemo,
+    IFrameDialog,
+    InputDemo,
+    JazzDialog,
+    ListDemo,
+    LiveAnnouncerDemo,
+    MatCheckboxDemoNestedChecklist,
+    MenuDemo,
+    PaginatorDemo,
+    PlatformDemo,
+    PortalDemo,
+    ProgressBarDemo,
+    ProgressSpinnerDemo,
+    RadioDemo,
+    RippleDemo,
+    ScienceJoke,
+    ScreenTypeDemo,
+    SelectDemo,
+    SidenavDemo,
+    SliderDemo,
+    SlideToggleDemo,
+    SnackBarDemo,
+    StepperDemo,
+    TabsDemo,
+    ToolbarDemo,
+    TooltipDemo,
+    TypographyDemo,
+    VirtualScrollDemo,
+  ],
+  providers: [
+    {provide: OverlayContainer, useClass: FullscreenOverlayContainer},
+  ],
+  entryComponents: [
+    ContentElementDialog,
+    CustomHeader,
+    CustomHeaderNgContent,
+    ExampleBottomSheet,
+    IFrameDialog,
+    JazzDialog,
+    ScienceJoke,
+  ],
+  bootstrap: [DevAppComponent],
+})
+export class DevAppModule {
+
+  constructor(injector: Injector) {
+    // Register examples as custom elements so that they can be inserted into the DOM dynamically
+    Object.keys(EXAMPLE_COMPONENTS).forEach(key => {
+      const element = createCustomElement(EXAMPLE_COMPONENTS[key].component, {injector});
+      customElements.define(key, element);
+    });
+  }
+}
diff --git a/src/demo-app/demo-app/demo-app.html b/src/dev-app/dev-app.html
similarity index 95%
rename from src/demo-app/demo-app/demo-app.html
rename to src/dev-app/dev-app.html
index 42692ff6f48e..a9687c8c4872 100644
--- a/src/demo-app/demo-app/demo-app.html
+++ b/src/dev-app/dev-app.html
@@ -34,7 +34,8 @@ <h1>Angular Material Demos</h1>
             <mat-icon>fullscreen</mat-icon>
           </button>
           <button mat-button (click)="toggleTheme()">{{dark ? 'Light' : 'Dark'}} theme</button>
-          <button mat-button (click)="root.dir = (root.dir === 'rtl' ? 'ltr' : 'rtl')" title="Toggle between RTL and LTR">
+          <button mat-button (click)="root.dir = (root.dir === 'rtl' ? 'ltr' : 'rtl')"
+                  title="Toggle between RTL and LTR">
             {{root.dir.toUpperCase()}}
           </button>
         </div>
diff --git a/src/demo-app/demo-app/demo-app.scss b/src/dev-app/dev-app.scss
similarity index 100%
rename from src/demo-app/demo-app/demo-app.scss
rename to src/dev-app/dev-app.scss
diff --git a/src/demo-app/demo-app/demo-app.ts b/src/dev-app/dev-app.ts
similarity index 84%
rename from src/demo-app/demo-app/demo-app.ts
rename to src/dev-app/dev-app.ts
index 9274d42fe953..345df6915897 100644
--- a/src/demo-app/demo-app/demo-app.ts
+++ b/src/dev-app/dev-app.ts
@@ -9,43 +9,15 @@
 import {OverlayContainer} from '@angular/cdk/overlay';
 import {Component, ElementRef, ViewEncapsulation} from '@angular/core';
 
-
-/**
- * The entry app for demo site. Routes under `accessibility` will use AccessibilityDemo component,
- * while other demos will use `DemoApp` component. Since DemoApp and AccessibilityDemo use
- * different templates (DemoApp has toolbar and sidenav), we use this EntryApp in index.html
- * as our entry point.
- */
-@Component({
-  moduleId: module.id,
-  selector: 'entry-app',
-  template: '<router-outlet></router-outlet>',
-})
-export class EntryApp {}
-
-/**
- * Home component for welcome message in DemoApp.
- */
-@Component({
-  selector: 'home',
-  template: `
-    <p>Welcome to the development demos for Angular Material!</p>
-    <p>Open the sidenav to select a demo.</p>
-  `,
-})
-export class Home {}
-
-/**
- * DemoApp with toolbar and sidenav.
- */
+/** Root component for the dev-app demos. */
 @Component({
   moduleId: module.id,
-  selector: 'demo-app',
-  templateUrl: 'demo-app.html',
-  styleUrls: ['demo-app.css'],
+  selector: 'dev-app',
+  templateUrl: 'dev-app.html',
+  styleUrls: ['dev-app.css'],
   encapsulation: ViewEncapsulation.None,
 })
-export class DemoApp {
+export class DevAppComponent {
   dark = false;
   navItems = [
     {name: 'Examples', route: '/examples'},
@@ -127,3 +99,14 @@ export class DemoApp {
     }
   }
 }
+
+
+/** Home component which includes a welcome message for the dev-app. */
+@Component({
+  selector: 'home',
+  template: `
+    <p>Welcome to the development demos for Angular Material!</p>
+    <p>Open the sidenav to select a demo.</p>
+  `,
+})
+export class DevAppHome {}
diff --git a/src/demo-app/dialog/dialog-demo.html b/src/dev-app/dialog/dialog-demo.html
similarity index 100%
rename from src/demo-app/dialog/dialog-demo.html
rename to src/dev-app/dialog/dialog-demo.html
diff --git a/src/demo-app/dialog/dialog-demo.scss b/src/dev-app/dialog/dialog-demo.scss
similarity index 100%
rename from src/demo-app/dialog/dialog-demo.scss
rename to src/dev-app/dialog/dialog-demo.scss
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts
similarity index 100%
rename from src/demo-app/dialog/dialog-demo.ts
rename to src/dev-app/dialog/dialog-demo.ts
diff --git a/src/demo-app/drag-drop/drag-drop-demo.html b/src/dev-app/drag-drop/drag-drop-demo.html
similarity index 100%
rename from src/demo-app/drag-drop/drag-drop-demo.html
rename to src/dev-app/drag-drop/drag-drop-demo.html
diff --git a/src/demo-app/drag-drop/drag-drop-demo.scss b/src/dev-app/drag-drop/drag-drop-demo.scss
similarity index 100%
rename from src/demo-app/drag-drop/drag-drop-demo.scss
rename to src/dev-app/drag-drop/drag-drop-demo.scss
diff --git a/src/demo-app/drag-drop/drag-drop-demo.ts b/src/dev-app/drag-drop/drag-drop-demo.ts
similarity index 100%
rename from src/demo-app/drag-drop/drag-drop-demo.ts
rename to src/dev-app/drag-drop/drag-drop-demo.ts
diff --git a/src/demo-app/drawer/drawer-demo.html b/src/dev-app/drawer/drawer-demo.html
similarity index 100%
rename from src/demo-app/drawer/drawer-demo.html
rename to src/dev-app/drawer/drawer-demo.html
diff --git a/src/demo-app/drawer/drawer-demo.scss b/src/dev-app/drawer/drawer-demo.scss
similarity index 100%
rename from src/demo-app/drawer/drawer-demo.scss
rename to src/dev-app/drawer/drawer-demo.scss
diff --git a/src/demo-app/drawer/drawer-demo.ts b/src/dev-app/drawer/drawer-demo.ts
similarity index 100%
rename from src/demo-app/drawer/drawer-demo.ts
rename to src/dev-app/drawer/drawer-demo.ts
diff --git a/src/demo-app/example/example-list.ts b/src/dev-app/example/example-list.ts
similarity index 100%
rename from src/demo-app/example/example-list.ts
rename to src/dev-app/example/example-list.ts
diff --git a/src/demo-app/example/example-module.ts b/src/dev-app/example/example-module.ts
similarity index 93%
rename from src/demo-app/example/example-module.ts
rename to src/dev-app/example/example-module.ts
index 96848bec7d1a..07270bd2ae8b 100644
--- a/src/demo-app/example/example-module.ts
+++ b/src/dev-app/example/example-module.ts
@@ -18,4 +18,4 @@ import {Example} from './example';
   declarations: [Example, ExampleList],
   exports: [Example, ExampleList]
 })
-export class MaterialExampleModule {}
+export class ExamplePageModule {}
diff --git a/src/demo-app/example/example.ts b/src/dev-app/example/example.ts
similarity index 100%
rename from src/demo-app/example/example.ts
rename to src/dev-app/example/example.ts
diff --git a/src/demo-app/examples-page/examples-page.ts b/src/dev-app/examples-page/examples-page.ts
similarity index 100%
rename from src/demo-app/examples-page/examples-page.ts
rename to src/dev-app/examples-page/examples-page.ts
diff --git a/src/demo-app/expansion/expansion-demo.html b/src/dev-app/expansion/expansion-demo.html
similarity index 100%
rename from src/demo-app/expansion/expansion-demo.html
rename to src/dev-app/expansion/expansion-demo.html
diff --git a/src/demo-app/expansion/expansion-demo.scss b/src/dev-app/expansion/expansion-demo.scss
similarity index 100%
rename from src/demo-app/expansion/expansion-demo.scss
rename to src/dev-app/expansion/expansion-demo.scss
diff --git a/src/demo-app/expansion/expansion-demo.ts b/src/dev-app/expansion/expansion-demo.ts
similarity index 100%
rename from src/demo-app/expansion/expansion-demo.ts
rename to src/dev-app/expansion/expansion-demo.ts
diff --git a/src/demo-app/favicon.ico b/src/dev-app/favicon.ico
similarity index 100%
rename from src/demo-app/favicon.ico
rename to src/dev-app/favicon.ico
diff --git a/src/demo-app/focus-origin/focus-origin-demo.html b/src/dev-app/focus-origin/focus-origin-demo.html
similarity index 100%
rename from src/demo-app/focus-origin/focus-origin-demo.html
rename to src/dev-app/focus-origin/focus-origin-demo.html
diff --git a/src/demo-app/focus-origin/focus-origin-demo.scss b/src/dev-app/focus-origin/focus-origin-demo.scss
similarity index 100%
rename from src/demo-app/focus-origin/focus-origin-demo.scss
rename to src/dev-app/focus-origin/focus-origin-demo.scss
diff --git a/src/demo-app/focus-origin/focus-origin-demo.ts b/src/dev-app/focus-origin/focus-origin-demo.ts
similarity index 100%
rename from src/demo-app/focus-origin/focus-origin-demo.ts
rename to src/dev-app/focus-origin/focus-origin-demo.ts
diff --git a/src/demo-app/gestures/gestures-demo.html b/src/dev-app/gestures/gestures-demo.html
similarity index 100%
rename from src/demo-app/gestures/gestures-demo.html
rename to src/dev-app/gestures/gestures-demo.html
diff --git a/src/demo-app/gestures/gestures-demo.scss b/src/dev-app/gestures/gestures-demo.scss
similarity index 100%
rename from src/demo-app/gestures/gestures-demo.scss
rename to src/dev-app/gestures/gestures-demo.scss
diff --git a/src/demo-app/gestures/gestures-demo.ts b/src/dev-app/gestures/gestures-demo.ts
similarity index 100%
rename from src/demo-app/gestures/gestures-demo.ts
rename to src/dev-app/gestures/gestures-demo.ts
diff --git a/src/demo-app/grid-list/grid-list-demo.html b/src/dev-app/grid-list/grid-list-demo.html
similarity index 100%
rename from src/demo-app/grid-list/grid-list-demo.html
rename to src/dev-app/grid-list/grid-list-demo.html
diff --git a/src/demo-app/grid-list/grid-list-demo.scss b/src/dev-app/grid-list/grid-list-demo.scss
similarity index 100%
rename from src/demo-app/grid-list/grid-list-demo.scss
rename to src/dev-app/grid-list/grid-list-demo.scss
diff --git a/src/demo-app/grid-list/grid-list-demo.ts b/src/dev-app/grid-list/grid-list-demo.ts
similarity index 100%
rename from src/demo-app/grid-list/grid-list-demo.ts
rename to src/dev-app/grid-list/grid-list-demo.ts
diff --git a/src/demo-app/icon/assets/core-icon-set.svg b/src/dev-app/icon/assets/core-icon-set.svg
similarity index 100%
rename from src/demo-app/icon/assets/core-icon-set.svg
rename to src/dev-app/icon/assets/core-icon-set.svg
diff --git a/src/demo-app/icon/assets/search-icon.svg b/src/dev-app/icon/assets/search-icon.svg
similarity index 100%
rename from src/demo-app/icon/assets/search-icon.svg
rename to src/dev-app/icon/assets/search-icon.svg
diff --git a/src/demo-app/icon/assets/thumbup-icon.svg b/src/dev-app/icon/assets/thumbup-icon.svg
similarity index 100%
rename from src/demo-app/icon/assets/thumbup-icon.svg
rename to src/dev-app/icon/assets/thumbup-icon.svg
diff --git a/src/demo-app/icon/icon-demo.html b/src/dev-app/icon/icon-demo.html
similarity index 100%
rename from src/demo-app/icon/icon-demo.html
rename to src/dev-app/icon/icon-demo.html
diff --git a/src/demo-app/icon/icon-demo.scss b/src/dev-app/icon/icon-demo.scss
similarity index 100%
rename from src/demo-app/icon/icon-demo.scss
rename to src/dev-app/icon/icon-demo.scss
diff --git a/src/demo-app/icon/icon-demo.ts b/src/dev-app/icon/icon-demo.ts
similarity index 100%
rename from src/demo-app/icon/icon-demo.ts
rename to src/dev-app/icon/icon-demo.ts
diff --git a/src/demo-app/index.html b/src/dev-app/index.html
similarity index 97%
rename from src/demo-app/index.html
rename to src/dev-app/index.html
index b1cfc865dfaf..3980b2506dec 100644
--- a/src/demo-app/index.html
+++ b/src/dev-app/index.html
@@ -22,7 +22,7 @@
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
 </head>
 <body>
-  <entry-app>Loading...</entry-app>
+  <dev-app>Loading...</dev-app>
 
   <script src="node_modules/core-js/client/core.js"></script>
   <script src="node_modules/systemjs/dist/system.src.js"></script>
diff --git a/src/demo-app/input/input-demo.html b/src/dev-app/input/input-demo.html
similarity index 100%
rename from src/demo-app/input/input-demo.html
rename to src/dev-app/input/input-demo.html
diff --git a/src/demo-app/input/input-demo.scss b/src/dev-app/input/input-demo.scss
similarity index 100%
rename from src/demo-app/input/input-demo.scss
rename to src/dev-app/input/input-demo.scss
diff --git a/src/demo-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts
similarity index 100%
rename from src/demo-app/input/input-demo.ts
rename to src/dev-app/input/input-demo.ts
diff --git a/src/demo-app/list/list-demo.html b/src/dev-app/list/list-demo.html
similarity index 100%
rename from src/demo-app/list/list-demo.html
rename to src/dev-app/list/list-demo.html
diff --git a/src/demo-app/list/list-demo.scss b/src/dev-app/list/list-demo.scss
similarity index 100%
rename from src/demo-app/list/list-demo.scss
rename to src/dev-app/list/list-demo.scss
diff --git a/src/demo-app/list/list-demo.ts b/src/dev-app/list/list-demo.ts
similarity index 100%
rename from src/demo-app/list/list-demo.ts
rename to src/dev-app/list/list-demo.ts
diff --git a/src/demo-app/live-announcer/live-announcer-demo.html b/src/dev-app/live-announcer/live-announcer-demo.html
similarity index 100%
rename from src/demo-app/live-announcer/live-announcer-demo.html
rename to src/dev-app/live-announcer/live-announcer-demo.html
diff --git a/src/demo-app/live-announcer/live-announcer-demo.ts b/src/dev-app/live-announcer/live-announcer-demo.ts
similarity index 100%
rename from src/demo-app/live-announcer/live-announcer-demo.ts
rename to src/dev-app/live-announcer/live-announcer-demo.ts
diff --git a/src/demo-app/main-aot.ts b/src/dev-app/main-aot.ts
similarity index 73%
rename from src/demo-app/main-aot.ts
rename to src/dev-app/main-aot.ts
index a5c9db6df722..a52059026939 100644
--- a/src/demo-app/main-aot.ts
+++ b/src/dev-app/main-aot.ts
@@ -11,6 +11,6 @@
  */
 
 import {platformBrowser} from '@angular/platform-browser';
-import {DemoAppModuleNgFactory} from './demo-app-module.ngfactory';
+import {DevAppModuleNgFactory} from './dev-app-module.ngfactory';
 
-platformBrowser().bootstrapModuleFactory(DemoAppModuleNgFactory);
+platformBrowser().bootstrapModuleFactory(DevAppModuleNgFactory);
diff --git a/src/demo-app/main.ts b/src/dev-app/main.ts
similarity index 72%
rename from src/demo-app/main.ts
rename to src/dev-app/main.ts
index 44ce4e6d9280..0c55f42f7301 100644
--- a/src/demo-app/main.ts
+++ b/src/dev-app/main.ts
@@ -7,6 +7,6 @@
  */
 
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
-import {DemoAppModule} from './demo-app-module';
+import {DevAppModule} from './dev-app-module';
 
-platformBrowserDynamic().bootstrapModule(DemoAppModule);
+platformBrowserDynamic().bootstrapModule(DevAppModule);
diff --git a/src/demo-app/demo-material-module.ts b/src/dev-app/material-module.ts
similarity index 98%
rename from src/demo-app/demo-material-module.ts
rename to src/dev-app/material-module.ts
index 9501b379f3f1..976ffa09da37 100644
--- a/src/demo-app/demo-material-module.ts
+++ b/src/dev-app/material-module.ts
@@ -62,7 +62,7 @@ import {
 
 
 /**
- * NgModule that includes all Material modules that are required to serve the demo-app.
+ * NgModule that includes all Material modules that are required to serve the dev-app.
  */
 @NgModule({
   exports: [
@@ -118,4 +118,4 @@ import {
     DragDropModule,
   ]
 })
-export class DemoMaterialModule {}
+export class DevAppMaterialModule {}
diff --git a/src/demo-app/menu/menu-demo.html b/src/dev-app/menu/menu-demo.html
similarity index 100%
rename from src/demo-app/menu/menu-demo.html
rename to src/dev-app/menu/menu-demo.html
diff --git a/src/demo-app/menu/menu-demo.scss b/src/dev-app/menu/menu-demo.scss
similarity index 100%
rename from src/demo-app/menu/menu-demo.scss
rename to src/dev-app/menu/menu-demo.scss
diff --git a/src/demo-app/menu/menu-demo.ts b/src/dev-app/menu/menu-demo.ts
similarity index 100%
rename from src/demo-app/menu/menu-demo.ts
rename to src/dev-app/menu/menu-demo.ts
diff --git a/src/demo-app/paginator/paginator-demo.html b/src/dev-app/paginator/paginator-demo.html
similarity index 100%
rename from src/demo-app/paginator/paginator-demo.html
rename to src/dev-app/paginator/paginator-demo.html
diff --git a/src/demo-app/paginator/paginator-demo.scss b/src/dev-app/paginator/paginator-demo.scss
similarity index 100%
rename from src/demo-app/paginator/paginator-demo.scss
rename to src/dev-app/paginator/paginator-demo.scss
diff --git a/src/demo-app/paginator/paginator-demo.ts b/src/dev-app/paginator/paginator-demo.ts
similarity index 100%
rename from src/demo-app/paginator/paginator-demo.ts
rename to src/dev-app/paginator/paginator-demo.ts
diff --git a/src/demo-app/platform/platform-demo.html b/src/dev-app/platform/platform-demo.html
similarity index 100%
rename from src/demo-app/platform/platform-demo.html
rename to src/dev-app/platform/platform-demo.html
diff --git a/src/demo-app/platform/platform-demo.ts b/src/dev-app/platform/platform-demo.ts
similarity index 100%
rename from src/demo-app/platform/platform-demo.ts
rename to src/dev-app/platform/platform-demo.ts
diff --git a/src/demo-app/portal/portal-demo.html b/src/dev-app/portal/portal-demo.html
similarity index 100%
rename from src/demo-app/portal/portal-demo.html
rename to src/dev-app/portal/portal-demo.html
diff --git a/src/demo-app/portal/portal-demo.scss b/src/dev-app/portal/portal-demo.scss
similarity index 100%
rename from src/demo-app/portal/portal-demo.scss
rename to src/dev-app/portal/portal-demo.scss
diff --git a/src/demo-app/portal/portal-demo.ts b/src/dev-app/portal/portal-demo.ts
similarity index 100%
rename from src/demo-app/portal/portal-demo.ts
rename to src/dev-app/portal/portal-demo.ts
diff --git a/src/demo-app/progress-bar/progress-bar-demo.html b/src/dev-app/progress-bar/progress-bar-demo.html
similarity index 100%
rename from src/demo-app/progress-bar/progress-bar-demo.html
rename to src/dev-app/progress-bar/progress-bar-demo.html
diff --git a/src/demo-app/progress-bar/progress-bar-demo.scss b/src/dev-app/progress-bar/progress-bar-demo.scss
similarity index 100%
rename from src/demo-app/progress-bar/progress-bar-demo.scss
rename to src/dev-app/progress-bar/progress-bar-demo.scss
diff --git a/src/demo-app/progress-bar/progress-bar-demo.ts b/src/dev-app/progress-bar/progress-bar-demo.ts
similarity index 100%
rename from src/demo-app/progress-bar/progress-bar-demo.ts
rename to src/dev-app/progress-bar/progress-bar-demo.ts
diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.html b/src/dev-app/progress-spinner/progress-spinner-demo.html
similarity index 100%
rename from src/demo-app/progress-spinner/progress-spinner-demo.html
rename to src/dev-app/progress-spinner/progress-spinner-demo.html
diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.scss b/src/dev-app/progress-spinner/progress-spinner-demo.scss
similarity index 100%
rename from src/demo-app/progress-spinner/progress-spinner-demo.scss
rename to src/dev-app/progress-spinner/progress-spinner-demo.scss
diff --git a/src/demo-app/progress-spinner/progress-spinner-demo.ts b/src/dev-app/progress-spinner/progress-spinner-demo.ts
similarity index 100%
rename from src/demo-app/progress-spinner/progress-spinner-demo.ts
rename to src/dev-app/progress-spinner/progress-spinner-demo.ts
diff --git a/src/demo-app/radio/radio-demo.html b/src/dev-app/radio/radio-demo.html
similarity index 100%
rename from src/demo-app/radio/radio-demo.html
rename to src/dev-app/radio/radio-demo.html
diff --git a/src/demo-app/radio/radio-demo.scss b/src/dev-app/radio/radio-demo.scss
similarity index 100%
rename from src/demo-app/radio/radio-demo.scss
rename to src/dev-app/radio/radio-demo.scss
diff --git a/src/demo-app/radio/radio-demo.ts b/src/dev-app/radio/radio-demo.ts
similarity index 100%
rename from src/demo-app/radio/radio-demo.ts
rename to src/dev-app/radio/radio-demo.ts
diff --git a/src/demo-app/ripple/ripple-demo.html b/src/dev-app/ripple/ripple-demo.html
similarity index 100%
rename from src/demo-app/ripple/ripple-demo.html
rename to src/dev-app/ripple/ripple-demo.html
diff --git a/src/demo-app/ripple/ripple-demo.scss b/src/dev-app/ripple/ripple-demo.scss
similarity index 100%
rename from src/demo-app/ripple/ripple-demo.scss
rename to src/dev-app/ripple/ripple-demo.scss
diff --git a/src/demo-app/ripple/ripple-demo.ts b/src/dev-app/ripple/ripple-demo.ts
similarity index 100%
rename from src/demo-app/ripple/ripple-demo.ts
rename to src/dev-app/ripple/ripple-demo.ts
diff --git a/src/dev-app/routes.ts b/src/dev-app/routes.ts
new file mode 100644
index 000000000000..f715d8a56826
--- /dev/null
+++ b/src/dev-app/routes.ts
@@ -0,0 +1,106 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Routes} from '@angular/router';
+import {AutocompleteDemo} from './autocomplete/autocomplete-demo';
+import {BadgeDemo} from './badge/badge-demo';
+import {BaselineDemo} from './baseline/baseline-demo';
+import {BottomSheetDemo} from './bottom-sheet/bottom-sheet-demo';
+import {ButtonToggleDemo} from './button-toggle/button-toggle-demo';
+import {ButtonDemo} from './button/button-demo';
+import {CardDemo} from './card/card-demo';
+import {CheckboxDemo} from './checkbox/checkbox-demo';
+import {ChipsDemo} from './chips/chips-demo';
+import {ConnectedOverlayDemo} from './connected-overlay/connected-overlay-demo';
+import {DatepickerDemo} from './datepicker/datepicker-demo';
+import {DevAppHome} from './dev-app';
+import {DialogDemo} from './dialog/dialog-demo';
+import {DragAndDropDemo} from './drag-drop/drag-drop-demo';
+import {DrawerDemo} from './drawer/drawer-demo';
+import {ExamplesPage} from './examples-page/examples-page';
+import {ExpansionDemo} from './expansion/expansion-demo';
+import {FocusOriginDemo} from './focus-origin/focus-origin-demo';
+import {GesturesDemo} from './gestures/gestures-demo';
+import {GridListDemo} from './grid-list/grid-list-demo';
+import {IconDemo} from './icon/icon-demo';
+import {InputDemo} from './input/input-demo';
+import {ListDemo} from './list/list-demo';
+import {LiveAnnouncerDemo} from './live-announcer/live-announcer-demo';
+import {MenuDemo} from './menu/menu-demo';
+import {PaginatorDemo} from './paginator/paginator-demo';
+import {PlatformDemo} from './platform/platform-demo';
+import {PortalDemo} from './portal/portal-demo';
+import {ProgressBarDemo} from './progress-bar/progress-bar-demo';
+import {ProgressSpinnerDemo} from './progress-spinner/progress-spinner-demo';
+import {RadioDemo} from './radio/radio-demo';
+import {RippleDemo} from './ripple/ripple-demo';
+import {ScreenTypeDemo} from './screen-type/screen-type-demo';
+import {SelectDemo} from './select/select-demo';
+import {SidenavDemo} from './sidenav/sidenav-demo';
+import {SlideToggleDemo} from './slide-toggle/slide-toggle-demo';
+import {SliderDemo} from './slider/slider-demo';
+import {SnackBarDemo} from './snack-bar/snack-bar-demo';
+import {StepperDemo} from './stepper/stepper-demo';
+import {TableDemo} from './table/table-demo';
+import {TabsDemo} from './tabs/tabs-demo';
+import {ToolbarDemo} from './toolbar/toolbar-demo';
+import {TooltipDemo} from './tooltip/tooltip-demo';
+import {TreeDemo} from './tree/tree-demo';
+import {TypographyDemo} from './typography/typography-demo';
+import {VirtualScrollDemo} from './virtual-scroll/virtual-scroll-demo';
+
+export const DEV_APP_ROUTES: Routes = [
+  {path: '', component: DevAppHome},
+  {path: 'autocomplete', component: AutocompleteDemo},
+  {path: 'badge', component: BadgeDemo},
+  {path: 'bottom-sheet', component: BottomSheetDemo},
+  {path: 'baseline', component: BaselineDemo},
+  {path: 'button', component: ButtonDemo},
+  {path: 'button-toggle', component: ButtonToggleDemo},
+  {path: 'card', component: CardDemo},
+  {path: 'checkbox', component: CheckboxDemo},
+  {path: 'chips', component: ChipsDemo},
+  {path: 'datepicker', component: DatepickerDemo},
+  {path: 'dialog', component: DialogDemo},
+  {path: 'drawer', component: DrawerDemo},
+  {path: 'drag-drop', component: DragAndDropDemo},
+  {path: 'expansion', component: ExpansionDemo},
+  {path: 'focus-origin', component: FocusOriginDemo},
+  {path: 'gestures', component: GesturesDemo},
+  {path: 'grid-list', component: GridListDemo},
+  {path: 'icon', component: IconDemo},
+  {path: 'input', component: InputDemo},
+  {path: 'list', component: ListDemo},
+  {path: 'live-announcer', component: LiveAnnouncerDemo},
+  {path: 'menu', component: MenuDemo},
+  {path: 'paginator', component: PaginatorDemo},
+  {path: 'platform', component: PlatformDemo},
+  {path: 'portal', component: PortalDemo},
+  {path: 'progress-bar', component: ProgressBarDemo},
+  {path: 'progress-spinner', component: ProgressSpinnerDemo},
+  {path: 'radio', component: RadioDemo},
+  {path: 'ripple', component: RippleDemo},
+  {path: 'select', component: SelectDemo},
+  {path: 'sidenav', component: SidenavDemo},
+  {path: 'slide-toggle', component: SlideToggleDemo},
+  {path: 'slider', component: SliderDemo},
+  {path: 'snack-bar', component: SnackBarDemo},
+  {path: 'stepper', component: StepperDemo},
+  {path: 'table', component: TableDemo},
+  {path: 'tabs', component: TabsDemo},
+  {path: 'toolbar', component: ToolbarDemo},
+  {path: 'tooltip', component: TooltipDemo},
+  {path: 'tree', component: TreeDemo},
+  {path: 'typography', component: TypographyDemo},
+  {path: 'expansion', component: ExpansionDemo},
+  {path: 'stepper', component: StepperDemo},
+  {path: 'screen-type', component: ScreenTypeDemo},
+  {path: 'connected-overlay', component: ConnectedOverlayDemo},
+  {path: 'virtual-scroll', component: VirtualScrollDemo},
+  {path: 'examples', component: ExamplesPage},
+];
diff --git a/src/demo-app/screen-type/screen-type-demo.html b/src/dev-app/screen-type/screen-type-demo.html
similarity index 100%
rename from src/demo-app/screen-type/screen-type-demo.html
rename to src/dev-app/screen-type/screen-type-demo.html
diff --git a/src/demo-app/screen-type/screen-type-demo.scss b/src/dev-app/screen-type/screen-type-demo.scss
similarity index 100%
rename from src/demo-app/screen-type/screen-type-demo.scss
rename to src/dev-app/screen-type/screen-type-demo.scss
diff --git a/src/demo-app/screen-type/screen-type-demo.ts b/src/dev-app/screen-type/screen-type-demo.ts
similarity index 100%
rename from src/demo-app/screen-type/screen-type-demo.ts
rename to src/dev-app/screen-type/screen-type-demo.ts
diff --git a/src/demo-app/select/select-demo.html b/src/dev-app/select/select-demo.html
similarity index 100%
rename from src/demo-app/select/select-demo.html
rename to src/dev-app/select/select-demo.html
diff --git a/src/demo-app/select/select-demo.scss b/src/dev-app/select/select-demo.scss
similarity index 100%
rename from src/demo-app/select/select-demo.scss
rename to src/dev-app/select/select-demo.scss
diff --git a/src/demo-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts
similarity index 100%
rename from src/demo-app/select/select-demo.ts
rename to src/dev-app/select/select-demo.ts
diff --git a/src/demo-app/sidenav/sidenav-demo.html b/src/dev-app/sidenav/sidenav-demo.html
similarity index 100%
rename from src/demo-app/sidenav/sidenav-demo.html
rename to src/dev-app/sidenav/sidenav-demo.html
diff --git a/src/demo-app/sidenav/sidenav-demo.scss b/src/dev-app/sidenav/sidenav-demo.scss
similarity index 100%
rename from src/demo-app/sidenav/sidenav-demo.scss
rename to src/dev-app/sidenav/sidenav-demo.scss
diff --git a/src/demo-app/sidenav/sidenav-demo.ts b/src/dev-app/sidenav/sidenav-demo.ts
similarity index 100%
rename from src/demo-app/sidenav/sidenav-demo.ts
rename to src/dev-app/sidenav/sidenav-demo.ts
diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.html b/src/dev-app/slide-toggle/slide-toggle-demo.html
similarity index 100%
rename from src/demo-app/slide-toggle/slide-toggle-demo.html
rename to src/dev-app/slide-toggle/slide-toggle-demo.html
diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.scss b/src/dev-app/slide-toggle/slide-toggle-demo.scss
similarity index 100%
rename from src/demo-app/slide-toggle/slide-toggle-demo.scss
rename to src/dev-app/slide-toggle/slide-toggle-demo.scss
diff --git a/src/demo-app/slide-toggle/slide-toggle-demo.ts b/src/dev-app/slide-toggle/slide-toggle-demo.ts
similarity index 100%
rename from src/demo-app/slide-toggle/slide-toggle-demo.ts
rename to src/dev-app/slide-toggle/slide-toggle-demo.ts
diff --git a/src/demo-app/slider/slider-demo.html b/src/dev-app/slider/slider-demo.html
similarity index 100%
rename from src/demo-app/slider/slider-demo.html
rename to src/dev-app/slider/slider-demo.html
diff --git a/src/demo-app/slider/slider-demo.ts b/src/dev-app/slider/slider-demo.ts
similarity index 100%
rename from src/demo-app/slider/slider-demo.ts
rename to src/dev-app/slider/slider-demo.ts
diff --git a/src/demo-app/snack-bar/snack-bar-demo.html b/src/dev-app/snack-bar/snack-bar-demo.html
similarity index 100%
rename from src/demo-app/snack-bar/snack-bar-demo.html
rename to src/dev-app/snack-bar/snack-bar-demo.html
diff --git a/src/demo-app/snack-bar/snack-bar-demo.scss b/src/dev-app/snack-bar/snack-bar-demo.scss
similarity index 100%
rename from src/demo-app/snack-bar/snack-bar-demo.scss
rename to src/dev-app/snack-bar/snack-bar-demo.scss
diff --git a/src/demo-app/snack-bar/snack-bar-demo.ts b/src/dev-app/snack-bar/snack-bar-demo.ts
similarity index 100%
rename from src/demo-app/snack-bar/snack-bar-demo.ts
rename to src/dev-app/snack-bar/snack-bar-demo.ts
diff --git a/src/demo-app/stepper/stepper-demo.html b/src/dev-app/stepper/stepper-demo.html
similarity index 100%
rename from src/demo-app/stepper/stepper-demo.html
rename to src/dev-app/stepper/stepper-demo.html
diff --git a/src/demo-app/stepper/stepper-demo.ts b/src/dev-app/stepper/stepper-demo.ts
similarity index 100%
rename from src/demo-app/stepper/stepper-demo.ts
rename to src/dev-app/stepper/stepper-demo.ts
diff --git a/src/demo-app/system-config.ts b/src/dev-app/system-config.ts
similarity index 99%
rename from src/demo-app/system-config.ts
rename to src/dev-app/system-config.ts
index fa42bcf77c52..c94aaf03bcaf 100644
--- a/src/demo-app/system-config.ts
+++ b/src/dev-app/system-config.ts
@@ -106,7 +106,7 @@ System.config({
     'rxjs': {main: 'index'},
     'rxjs/operators': {main: 'index'},
 
-    // Set the default extension for the root package, because otherwise the demo-app can't
+    // Set the default extension for the root package, because otherwise the dev-app can't
     // be built within the production mode. Due to missing file extensions.
     '.': {
       defaultExtension: 'js'
diff --git a/src/demo-app/table/table-demo-module.ts b/src/dev-app/table/table-demo-module.ts
similarity index 78%
rename from src/demo-app/table/table-demo-module.ts
rename to src/dev-app/table/table-demo-module.ts
index f35e57a025c8..1cd6373ca9ad 100644
--- a/src/demo-app/table/table-demo-module.ts
+++ b/src/dev-app/table/table-demo-module.ts
@@ -8,10 +8,10 @@
 
 import {NgModule} from '@angular/core';
 import {TableDemo} from './table-demo';
-import {MaterialExampleModule} from '../example/example-module';
+import {ExamplePageModule} from '../example/example-module';
 
 @NgModule({
-  imports: [MaterialExampleModule],
+  imports: [ExamplePageModule],
   declarations: [TableDemo],
 })
 export class TableDemoModule { }
diff --git a/src/demo-app/table/table-demo.ts b/src/dev-app/table/table-demo.ts
similarity index 100%
rename from src/demo-app/table/table-demo.ts
rename to src/dev-app/table/table-demo.ts
diff --git a/src/demo-app/tabs/tabs-demo.html b/src/dev-app/tabs/tabs-demo.html
similarity index 100%
rename from src/demo-app/tabs/tabs-demo.html
rename to src/dev-app/tabs/tabs-demo.html
diff --git a/src/demo-app/tabs/tabs-demo.ts b/src/dev-app/tabs/tabs-demo.ts
similarity index 100%
rename from src/demo-app/tabs/tabs-demo.ts
rename to src/dev-app/tabs/tabs-demo.ts
diff --git a/src/demo-app/theme.scss b/src/dev-app/theme.scss
similarity index 100%
rename from src/demo-app/theme.scss
rename to src/dev-app/theme.scss
diff --git a/src/demo-app/toolbar/toolbar-demo.html b/src/dev-app/toolbar/toolbar-demo.html
similarity index 100%
rename from src/demo-app/toolbar/toolbar-demo.html
rename to src/dev-app/toolbar/toolbar-demo.html
diff --git a/src/demo-app/toolbar/toolbar-demo.scss b/src/dev-app/toolbar/toolbar-demo.scss
similarity index 100%
rename from src/demo-app/toolbar/toolbar-demo.scss
rename to src/dev-app/toolbar/toolbar-demo.scss
diff --git a/src/demo-app/toolbar/toolbar-demo.ts b/src/dev-app/toolbar/toolbar-demo.ts
similarity index 100%
rename from src/demo-app/toolbar/toolbar-demo.ts
rename to src/dev-app/toolbar/toolbar-demo.ts
diff --git a/src/demo-app/tooltip/tooltip-demo.html b/src/dev-app/tooltip/tooltip-demo.html
similarity index 100%
rename from src/demo-app/tooltip/tooltip-demo.html
rename to src/dev-app/tooltip/tooltip-demo.html
diff --git a/src/demo-app/tooltip/tooltip-demo.ts b/src/dev-app/tooltip/tooltip-demo.ts
similarity index 100%
rename from src/demo-app/tooltip/tooltip-demo.ts
rename to src/dev-app/tooltip/tooltip-demo.ts
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-database.ts b/src/dev-app/tree/checklist-tree-demo/checklist-database.ts
similarity index 100%
rename from src/demo-app/tree/checklist-tree-demo/checklist-database.ts
rename to src/dev-app/tree/checklist-tree-demo/checklist-database.ts
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html b/src/dev-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html
similarity index 100%
rename from src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html
rename to src/dev-app/tree/checklist-tree-demo/checklist-nested-tree-demo.html
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.scss b/src/dev-app/tree/checklist-tree-demo/checklist-nested-tree-demo.scss
similarity index 100%
rename from src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.scss
rename to src/dev-app/tree/checklist-tree-demo/checklist-nested-tree-demo.scss
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.ts b/src/dev-app/tree/checklist-tree-demo/checklist-nested-tree-demo.ts
similarity index 100%
rename from src/demo-app/tree/checklist-tree-demo/checklist-nested-tree-demo.ts
rename to src/dev-app/tree/checklist-tree-demo/checklist-nested-tree-demo.ts
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html b/src/dev-app/tree/checklist-tree-demo/checklist-tree-demo.html
similarity index 100%
rename from src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.html
rename to src/dev-app/tree/checklist-tree-demo/checklist-tree-demo.html
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.scss b/src/dev-app/tree/checklist-tree-demo/checklist-tree-demo.scss
similarity index 100%
rename from src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.scss
rename to src/dev-app/tree/checklist-tree-demo/checklist-tree-demo.scss
diff --git a/src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.ts b/src/dev-app/tree/checklist-tree-demo/checklist-tree-demo.ts
similarity index 100%
rename from src/demo-app/tree/checklist-tree-demo/checklist-tree-demo.ts
rename to src/dev-app/tree/checklist-tree-demo/checklist-tree-demo.ts
diff --git a/src/demo-app/tree/dynamic-tree-demo/dynamic-database.ts b/src/dev-app/tree/dynamic-tree-demo/dynamic-database.ts
similarity index 100%
rename from src/demo-app/tree/dynamic-tree-demo/dynamic-database.ts
rename to src/dev-app/tree/dynamic-tree-demo/dynamic-database.ts
diff --git a/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html b/src/dev-app/tree/dynamic-tree-demo/dynamic-tree-demo.html
similarity index 100%
rename from src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.html
rename to src/dev-app/tree/dynamic-tree-demo/dynamic-tree-demo.html
diff --git a/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.scss b/src/dev-app/tree/dynamic-tree-demo/dynamic-tree-demo.scss
similarity index 100%
rename from src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.scss
rename to src/dev-app/tree/dynamic-tree-demo/dynamic-tree-demo.scss
diff --git a/src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.ts b/src/dev-app/tree/dynamic-tree-demo/dynamic-tree-demo.ts
similarity index 100%
rename from src/demo-app/tree/dynamic-tree-demo/dynamic-tree-demo.ts
rename to src/dev-app/tree/dynamic-tree-demo/dynamic-tree-demo.ts
diff --git a/src/demo-app/tree/file-database.ts b/src/dev-app/tree/file-database.ts
similarity index 100%
rename from src/demo-app/tree/file-database.ts
rename to src/dev-app/tree/file-database.ts
diff --git a/src/demo-app/tree/loadmore-tree-demo/loadmore-database.ts b/src/dev-app/tree/loadmore-tree-demo/loadmore-database.ts
similarity index 100%
rename from src/demo-app/tree/loadmore-tree-demo/loadmore-database.ts
rename to src/dev-app/tree/loadmore-tree-demo/loadmore-database.ts
diff --git a/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html b/src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.html
similarity index 100%
rename from src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.html
rename to src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.html
diff --git a/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.scss b/src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.scss
similarity index 100%
rename from src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.scss
rename to src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.scss
diff --git a/src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.ts b/src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.ts
similarity index 100%
rename from src/demo-app/tree/loadmore-tree-demo/loadmore-tree-demo.ts
rename to src/dev-app/tree/loadmore-tree-demo/loadmore-tree-demo.ts
diff --git a/src/demo-app/tree/tree-demo-module.ts b/src/dev-app/tree/tree-demo-module.ts
similarity index 100%
rename from src/demo-app/tree/tree-demo-module.ts
rename to src/dev-app/tree/tree-demo-module.ts
diff --git a/src/demo-app/tree/tree-demo.html b/src/dev-app/tree/tree-demo.html
similarity index 100%
rename from src/demo-app/tree/tree-demo.html
rename to src/dev-app/tree/tree-demo.html
diff --git a/src/demo-app/tree/tree-demo.scss b/src/dev-app/tree/tree-demo.scss
similarity index 100%
rename from src/demo-app/tree/tree-demo.scss
rename to src/dev-app/tree/tree-demo.scss
diff --git a/src/demo-app/tree/tree-demo.ts b/src/dev-app/tree/tree-demo.ts
similarity index 100%
rename from src/demo-app/tree/tree-demo.ts
rename to src/dev-app/tree/tree-demo.ts
diff --git a/src/demo-app/tsconfig-aot.json b/src/dev-app/tsconfig-aot.json
similarity index 86%
rename from src/demo-app/tsconfig-aot.json
rename to src/dev-app/tsconfig-aot.json
index d954408ad39b..6faa3db693e4 100644
--- a/src/demo-app/tsconfig-aot.json
+++ b/src/dev-app/tsconfig-aot.json
@@ -1,4 +1,4 @@
-// TypeScript config that extends the demo-app tsconfig file. This config compiles the
+// TypeScript config that extends the dev-app tsconfig file. This config compiles the
 // "main-aot.ts" file and also enables templage code generation / AOT.
 {
   "extends": "./tsconfig-build",
@@ -11,12 +11,12 @@
     "strictFunctionTypes": true,
     "noImplicitAny": true,
     "noImplicitThis": true,
-    "outDir": "../../dist/packages/demo-app",
+    "outDir": "../../dist/packages/dev-app",
     "rootDirs": [
       ".",
       // Include the package output here because otherwise NGC won't be able to load
       // the SCSS files.
-      "../../dist/packages/demo-app"
+      "../../dist/packages/dev-app"
     ],
     "paths": {
       "@angular/material/*": ["../../dist/releases/material/*"],
@@ -32,8 +32,8 @@
     }
   },
   "files": [
-    "./demo-app-types.d.ts",
-    "./demo-app-module.ts",
+    "./typings.d.ts",
+    "./dev-app-module.ts",
     "./main-aot.ts"
   ],
   "angularCompilerOptions": {
diff --git a/src/demo-app/tsconfig-build.json b/src/dev-app/tsconfig-build.json
similarity index 85%
rename from src/demo-app/tsconfig-build.json
rename to src/dev-app/tsconfig-build.json
index 97522f7746f3..36babb132c5f 100644
--- a/src/demo-app/tsconfig-build.json
+++ b/src/dev-app/tsconfig-build.json
@@ -1,5 +1,5 @@
-// TypeScript config file that is used to compile the demo-app. Target environment will be ES5,
-// since the demo-app will be served in the browser.
+// TypeScript config file that is used to compile the dev-app. Target environment will be ES5,
+// since the dev-app will be served in the browser.
 {
   "compilerOptions": {
     // Needed for Moment.js since it doesn't have a default export.
@@ -17,7 +17,7 @@
     "moduleResolution": "node",
     "noEmitOnError": true,
     "noImplicitAny": true,
-    "outDir": "../../dist/packages/demo-app",
+    "outDir": "../../dist/packages/dev-app",
     "sourceMap": true,
     "target": "es5",
     "stripInternal": false,
@@ -39,8 +39,8 @@
     }
   },
   "files": [
-    "./demo-app-types.d.ts",
-    "./demo-app-module.ts",
+    "./typings.d.ts",
+    "./dev-app-module.ts",
     "./system-config.ts",
     "./main.ts"
   ]
diff --git a/src/demo-app/tsconfig.json b/src/dev-app/tsconfig.json
similarity index 100%
rename from src/demo-app/tsconfig.json
rename to src/dev-app/tsconfig.json
diff --git a/src/demo-app/demo-app-types.d.ts b/src/dev-app/typings.d.ts
similarity index 100%
rename from src/demo-app/demo-app-types.d.ts
rename to src/dev-app/typings.d.ts
diff --git a/src/demo-app/typography/typography-demo.html b/src/dev-app/typography/typography-demo.html
similarity index 100%
rename from src/demo-app/typography/typography-demo.html
rename to src/dev-app/typography/typography-demo.html
diff --git a/src/demo-app/typography/typography-demo.scss b/src/dev-app/typography/typography-demo.scss
similarity index 100%
rename from src/demo-app/typography/typography-demo.scss
rename to src/dev-app/typography/typography-demo.scss
diff --git a/src/demo-app/typography/typography-demo.ts b/src/dev-app/typography/typography-demo.ts
similarity index 100%
rename from src/demo-app/typography/typography-demo.ts
rename to src/dev-app/typography/typography-demo.ts
diff --git a/src/demo-app/virtual-scroll/virtual-scroll-demo.html b/src/dev-app/virtual-scroll/virtual-scroll-demo.html
similarity index 100%
rename from src/demo-app/virtual-scroll/virtual-scroll-demo.html
rename to src/dev-app/virtual-scroll/virtual-scroll-demo.html
diff --git a/src/demo-app/virtual-scroll/virtual-scroll-demo.scss b/src/dev-app/virtual-scroll/virtual-scroll-demo.scss
similarity index 100%
rename from src/demo-app/virtual-scroll/virtual-scroll-demo.scss
rename to src/dev-app/virtual-scroll/virtual-scroll-demo.scss
diff --git a/src/demo-app/virtual-scroll/virtual-scroll-demo.ts b/src/dev-app/virtual-scroll/virtual-scroll-demo.ts
similarity index 100%
rename from src/demo-app/virtual-scroll/virtual-scroll-demo.ts
rename to src/dev-app/virtual-scroll/virtual-scroll-demo.ts
diff --git a/src/e2e-app/system-config.ts b/src/e2e-app/system-config.ts
index 5ee59c0e5b58..1c3fea5895a5 100644
--- a/src/e2e-app/system-config.ts
+++ b/src/e2e-app/system-config.ts
@@ -97,7 +97,7 @@ System.config({
     'rxjs': {main: 'index'},
     'rxjs/operators': {main: 'index'},
 
-    // Set the default extension for the root package, because otherwise the demo-app can't
+    // Set the default extension for the root package, because otherwise the e2e app can't
     // be built within the production mode. Due to missing file extensions.
     '.': {
       defaultExtension: 'js'
diff --git a/test/karma-system-config.js b/test/karma-system-config.js
index af7a6e8d4f30..01a6ec01c947 100644
--- a/test/karma-system-config.js
+++ b/test/karma-system-config.js
@@ -102,7 +102,7 @@ System.config({
     'rxjs': {main: 'index'},
     'rxjs/operators': {main: 'index'},
 
-    // Set the default extension for the root package, because otherwise the demo-app can't
+    // Set the default extension for the root package, because otherwise the tests can't
     // be built within the production mode. Due to missing file extensions.
     '.': {
       defaultExtension: 'js'
diff --git a/tools/gulp/tasks/aot.ts b/tools/gulp/tasks/aot.ts
index 0f1b088f7e01..2db1c107f7fa 100644
--- a/tools/gulp/tasks/aot.ts
+++ b/tools/gulp/tasks/aot.ts
@@ -5,14 +5,14 @@ import {buildConfig, sequenceTask} from 'material2-build-tools';
 
 const {packagesDir} = buildConfig;
 
-/** Path to the demo-app source directory. */
-const demoAppSource = join(packagesDir, 'demo-app');
+/** Path to the dev-app source directory. */
+const devAppSource = join(packagesDir, 'dev-app');
 
 /** Path to the tsconfig file that builds the AOT files. */
-const tsconfigFile = join(demoAppSource, 'tsconfig-aot.json');
+const tsconfigFile = join(devAppSource, 'tsconfig-aot.json');
 
 /**
- * Build the demo-app wit the release output in order confirm that the library is
+ * Build the dev-app wit the release output in order confirm that the library is
  * working with AOT compilation enabled.
  */
 task('build-aot', sequenceTask(
@@ -22,12 +22,12 @@ task('build-aot', sequenceTask(
 ));
 
 /**
- * Task that can be used to build the demo-app with AOT without building the
+ * Task that can be used to build the dev-app with AOT without building the
  * release output. This can be run if the release output is already built.
  */
 task('build-aot:no-release-build', sequenceTask('build-aot:assets', 'build-aot:compiler-cli'));
 
-/** Builds the demo-app assets and builds the required release packages. */
+/** Builds the dev-app assets and builds the required release packages. */
 task('build-aot:release-packages', sequenceTask(
   [
     'cdk:build-release',
@@ -40,12 +40,12 @@ task('build-aot:release-packages', sequenceTask(
 ));
 
 /**
- * Task that builds the assets which are required for building with AOT. Since the demo-app uses
+ * Task that builds the assets which are required for building with AOT. Since the dev-app uses
  * Sass files, we need to provide the transpiled CSS sources in the package output.
  */
 task('build-aot:assets', [':build:devapp:assets', ':build:devapp:scss']);
 
-/** Build the demo-app and a release to confirm that the library is AOT-compatible. */
+/** Build the dev-app and a release to confirm that the library is AOT-compatible. */
 task('build-aot:compiler-cli', execNodeTask(
   '@angular/compiler-cli', 'ngc', ['-p', tsconfigFile]
 ));
diff --git a/tools/gulp/tasks/development.ts b/tools/gulp/tasks/development.ts
index 883e8a7f8e22..9cb91c123090 100644
--- a/tools/gulp/tasks/development.ts
+++ b/tools/gulp/tasks/development.ts
@@ -26,10 +26,10 @@ const {outputDir, packagesDir, projectDir} = buildConfig;
 /** Path to the directory where all bundles live. */
 const bundlesDir = join(outputDir, 'bundles');
 
-const appDir = join(packagesDir, 'demo-app');
-const outDir = join(outputDir, 'packages', 'demo-app');
+const appDir = join(packagesDir, 'dev-app');
+const outDir = join(outputDir, 'packages', 'dev-app');
 
-/** Array of vendors that are required to serve the demo-app. */
+/** Array of vendors that are required to serve the dev-app. */
 const appVendors = [
   '@angular',
   'systemjs',
@@ -42,13 +42,13 @@ const appVendors = [
   '@webcomponents',
 ];
 
-/** Glob that matches all required vendors for the demo-app. */
+/** Glob that matches all required vendors for the dev-app. */
 const vendorGlob = `+(${appVendors.join('|')})/**/*.+(html|css|js|map)`;
 
 /** Glob that matches all assets that need to be copied to the output. */
 const assetsGlob = join(appDir, `**/*.+(html|css|svg|ico)`);
 
-/** Path to the demo-app tsconfig file. */
+/** Path to the dev-app tsconfig file. */
 const tsconfigPath = join(appDir, 'tsconfig-build.json');
 
 task(':build:devapp:ts', tsBuildTask(tsconfigPath));
@@ -70,7 +70,7 @@ task('build:devapp', sequenceTask(
   'material-examples:build-no-bundles',
   [':build:devapp:assets', ':build:devapp:scss', ':build:devapp:ts'],
   // Inline all component resources because otherwise SystemJS tries to load HTML, CSS and
-  // JavaScript files which makes loading the demo-app extremely slow.
+  // JavaScript files which makes loading the dev-app extremely slow.
   ':build:devapp:inline-resources',
 ));
 
@@ -81,7 +81,7 @@ task('serve:devapp', ['build:devapp'], sequenceTask([':serve:devapp', ':watch:de
  * serve task with a middleware. e.g. on Firebase hosting.
  */
 
-/** Task that copies all vendors into the demo-app package. Allows hosting the app on firebase. */
+/** Task that copies all vendors into the dev-app package. Allows hosting the app on firebase. */
 task('stage-deploy:devapp', ['build:devapp'], () => {
   copyFiles(join(projectDir, 'node_modules'), vendorGlob, join(outDir, 'node_modules'));
   copyFiles(bundlesDir, '*.+(js|map)', join(outDir, 'dist/bundles'));
@@ -100,14 +100,14 @@ task('stage-deploy:devapp', ['build:devapp'], () => {
 });
 
 /**
- * Task that deploys the demo-app to Firebase. Firebase project will be the one that is
+ * Task that deploys the dev-app to Firebase. Firebase project will be the one that is
  * set for project directory using the Firebase CLI.
  */
 task('deploy:devapp', ['stage-deploy:devapp'], () => {
   return firebaseTools.deploy({cwd: projectDir, only: 'hosting'})
     // Firebase tools opens a persistent websocket connection and the process will never exit.
     .then(() => {
-      console.log('Successfully deployed the demo-app to firebase');
+      console.log('Successfully deployed the dev-app to firebase');
       process.exit(0);
     })
     .catch((err: any) => {
@@ -127,7 +127,7 @@ task(':watch:devapp', () => {
   watchFiles(join(appDir, '**/*.scss'), [':watch:devapp:rebuild-scss']);
   watchFiles(join(appDir, '**/*.html'), [':watch:devapp:rebuild-html']);
 
-  // Custom watchers for all packages that are used inside of the demo-app. This is necessary
+  // Custom watchers for all packages that are used inside of the dev-app. This is necessary
   // because we only want to build the changed package (using the build-no-bundles task).
 
   // CDK package watchers.
diff --git a/tools/sass_generate_binaries.bzl b/tools/sass_generate_binaries.bzl
new file mode 100644
index 000000000000..d6cfca657ac9
--- /dev/null
+++ b/tools/sass_generate_binaries.bzl
@@ -0,0 +1,16 @@
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+
+# Generates multiple sass binaries based on a specified list of source files.
+# All generated sass binaries will be exposed as a filegroup that has all the
+# CSS outputs from the specified source files.
+def sass_generate_binaries(filegroup_name, source_files):
+  for source_file in source_files:
+    sass_binary(
+      name = source_file.replace('.scss', '_scss'),
+      src = source_file,
+    )
+
+  native.filegroup(
+    name = filegroup_name,
+    srcs = [file.replace(".scss", "_scss") for file in source_files]
+  )
diff --git a/tslint.json b/tslint.json
index fbd4824213de..350ca87bd8db 100644
--- a/tslint.json
+++ b/tslint.json
@@ -123,7 +123,7 @@
     }, "src/+(lib|cdk|material-experimental|cdk-experimental)/**/!(*.spec).ts"],
     "require-license-banner": [
       true,
-      "src/+(lib|cdk|material-experimental|cdk-experimental|demo-app)/**/!(*.spec).ts"
+      "src/+(lib|cdk|material-experimental|cdk-experimental|dev-app)/**/!(*.spec).ts"
     ],
     "missing-rollup-globals": [
       true,