diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index acc764a6d9e..d1d965df66c 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -176,19 +176,26 @@
 /src/e2e-app/*                                     @jelbourn
 /src/e2e-app/block-scroll-strategy/**              @andrewseguin @crisbeto
 /src/e2e-app/button/**                             @jelbourn
+/src/e2e-app/button-toggle/**                      @jelbourn
+/src/e2e-app/card/**                               @jelbourn
 /src/e2e-app/checkbox/**                           @jelbourn @devversion
 /src/e2e-app/dialog/**                             @jelbourn @crisbeto
 /src/e2e-app/e2e-app/**                            @jelbourn
+/src/e2e-app/example-viewer/**                     @andrewseguin
+/src/e2e-app/expansion/**                          @josephperrott
 /src/e2e-app/grid-list/**                          @jelbourn
 /src/e2e-app/icon/**                               @jelbourn
 /src/e2e-app/input/**                              @mmalerba
+/src/e2e-app/list/**                               @jelbourn
 /src/e2e-app/menu/**                               @crisbeto
 /src/e2e-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
 /src/e2e-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott
 /src/e2e-app/radio/**                              @jelbourn @devversion
 /src/e2e-app/sidenav/**                            @mmalerba
 /src/e2e-app/slide-toggle/**                       @devversion
+/src/e2e-app/stepper/**                            @mmalerba
 /src/e2e-app/tabs/**                               @andrewseguin
+/src/e2e-app/toolbar/**                            @devversion
 /src/e2e-app/virtual-scroll/**                     @mmalerba
 
 # Universal app
diff --git a/packages.bzl b/packages.bzl
index ed03c6b337f..3907b0acfdb 100644
--- a/packages.bzl
+++ b/packages.bzl
@@ -123,6 +123,7 @@ ANGULAR_LIBRARY_UMDS = [
   "@npm//node_modules/@angular/compiler:bundles/compiler.umd.js",
   "@npm//node_modules/@angular/core:bundles/core-testing.umd.js",
   "@npm//node_modules/@angular/core:bundles/core.umd.js",
+  "@npm//node_modules/@angular/elements:bundles/elements.umd.js",
   "@npm//node_modules/@angular/forms:bundles/forms.umd.js",
   "@npm//node_modules/@angular/platform-browser-dynamic:bundles/platform-browser-dynamic-testing.umd.js",
   "@npm//node_modules/@angular/platform-browser-dynamic:bundles/platform-browser-dynamic.umd.js",
diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
index cbc0a77d0eb..55c4e525b31 100644
--- a/src/e2e-app/BUILD.bazel
+++ b/src/e2e-app/BUILD.bazel
@@ -10,10 +10,12 @@ ng_module(
   assets = glob(["**/*.html", "**/*.css"], exclude = ["index.html"]),
   deps = [
     "@npm//@angular/core",
+    "@npm//@angular/elements",
     "@npm//@angular/forms",
     "@npm//@angular/platform-browser",
     "@npm//@angular/router",
     "@npm//@angular/animations",
+    "@npm//@webcomponents/custom-elements",
     "//src/cdk/drag-drop",
     "//src/cdk/overlay",
     "//src/cdk/scrolling",
@@ -43,6 +45,7 @@ ts_devserver(
       "@npm//zone.js",
       "@npm//core-js",
       "@npm//hammerjs",
+      "@npm//@webcomponents/custom-elements",
       "//src/lib/prebuilt-themes:indigo-pink",
       ":index.html",
     ],
diff --git a/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e-module.ts b/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e-module.ts
new file mode 100644
index 00000000000..243ccce595f
--- /dev/null
+++ b/src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {ScrollingModule} from '@angular/cdk/scrolling';
+import {NgModule} from '@angular/core';
+import {BlockScrollStrategyE2E} from './block-scroll-strategy-e2e';
+
+@NgModule({
+  imports: [ScrollingModule],
+  declarations: [BlockScrollStrategyE2E],
+})
+export class BlockScrollStrategyE2eModule {
+}
diff --git a/src/e2e-app/button-toggle/button-toggle-e2e-module.ts b/src/e2e-app/button-toggle/button-toggle-e2e-module.ts
new file mode 100644
index 00000000000..52ab09a60cb
--- /dev/null
+++ b/src/e2e-app/button-toggle/button-toggle-e2e-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {ButtonToggleE2e} from './button-toggle-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ButtonToggleE2e],
+})
+export class ButtonToggleE2eModule {
+}
diff --git a/src/e2e-app/button-toggle/button-toggle-e2e.ts b/src/e2e-app/button-toggle/button-toggle-e2e.ts
new file mode 100644
index 00000000000..5e9c2d8939f
--- /dev/null
+++ b/src/e2e-app/button-toggle/button-toggle-e2e.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'button-toggle-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ButtonToggleE2e {
+  examples = ['button-toggle-overview'];
+}
diff --git a/src/e2e-app/button/button-e2e-module.ts b/src/e2e-app/button/button-e2e-module.ts
new file mode 100644
index 00000000000..d6a48cc4fd5
--- /dev/null
+++ b/src/e2e-app/button/button-e2e-module.ts
@@ -0,0 +1,21 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatButtonModule, MatIconModule} from '@angular/material';
+import {ButtonE2E} from './button-e2e';
+
+@NgModule({
+  imports: [
+    MatButtonModule,
+    MatIconModule,
+  ],
+  declarations: [ButtonE2E],
+})
+export class ButtonE2eModule {
+}
diff --git a/src/e2e-app/card/card-e2e-module.ts b/src/e2e-app/card/card-e2e-module.ts
new file mode 100644
index 00000000000..be1f46c1fc4
--- /dev/null
+++ b/src/e2e-app/card/card-e2e-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {CardE2e} from './card-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [CardE2e],
+})
+export class CardE2eModule {
+}
diff --git a/src/e2e-app/card/card-e2e.ts b/src/e2e-app/card/card-e2e.ts
new file mode 100644
index 00000000000..98057df9892
--- /dev/null
+++ b/src/e2e-app/card/card-e2e.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'card-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class CardE2e {
+  examples = ['card-fancy'];
+}
diff --git a/src/e2e-app/checkbox/checkbox-e2e-module.ts b/src/e2e-app/checkbox/checkbox-e2e-module.ts
new file mode 100644
index 00000000000..08daf081308
--- /dev/null
+++ b/src/e2e-app/checkbox/checkbox-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatCheckboxModule} from '@angular/material';
+import {SimpleCheckboxes} from './checkbox-e2e';
+
+@NgModule({
+  imports: [MatCheckboxModule],
+  declarations: [SimpleCheckboxes],
+})
+export class CheckboxE2eModule {
+}
diff --git a/src/e2e-app/dialog/dialog-e2e-module.ts b/src/e2e-app/dialog/dialog-e2e-module.ts
new file mode 100644
index 00000000000..4c36239708f
--- /dev/null
+++ b/src/e2e-app/dialog/dialog-e2e-module.ts
@@ -0,0 +1,19 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatDialogModule} from '@angular/material';
+import {DialogE2E, TestDialog} from './dialog-e2e';
+
+@NgModule({
+  imports: [MatDialogModule],
+  declarations: [DialogE2E, TestDialog],
+  entryComponents: [TestDialog]
+})
+export class DialogE2eModule {
+}
diff --git a/src/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app-module.ts
deleted file mode 100644
index 30bc6edbbd7..00000000000
--- a/src/e2e-app/e2e-app-module.ts
+++ /dev/null
@@ -1,112 +0,0 @@
-import {DialogModule} from '@angular/cdk-experimental/dialog';
-import {DragDropModule} from '@angular/cdk/drag-drop';
-import {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
-import {ScrollingModule} from '@angular/cdk/scrolling';
-import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
-import {
-  MatButtonModule,
-  MatCheckboxModule,
-  MatDialogModule,
-  MatDividerModule,
-  MatFormFieldModule,
-  MatGridListModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatMenuModule,
-  MatNativeDateModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
-  MatRadioModule,
-  MatSidenavModule,
-  MatSlideToggleModule,
-  MatStepperModule,
-  MatTabsModule,
-} from '@angular/material';
-import {ExampleModule} from '@angular/material-examples';
-import {BrowserModule} from '@angular/platform-browser';
-import {NoopAnimationsModule} from '@angular/platform-browser/animations';
-import {RouterModule} from '@angular/router';
-import {BlockScrollStrategyE2E} from './block-scroll-strategy/block-scroll-strategy-e2e';
-import {ButtonE2E} from './button/button-e2e';
-import {SimpleCheckboxes} from './checkbox/checkbox-e2e';
-import {DialogE2E, TestDialog} from './dialog/dialog-e2e';
-import {E2EApp, Home} from './e2e-app/e2e-app';
-import {E2E_APP_ROUTES} from './e2e-app/routes';
-import {GridListE2E} from './grid-list/grid-list-e2e';
-import {IconE2E} from './icon/icon-e2e';
-import {InputE2E} from './input/input-e2e';
-import {MenuE2E} from './menu/menu-e2e';
-import {ProgressBarE2E} from './progress-bar/progress-bar-e2e';
-import {ProgressSpinnerE2E} from './progress-spinner/progress-spinner-e2e';
-import {SimpleRadioButtons} from './radio/radio-e2e';
-import {SidenavE2E} from './sidenav/sidenav-e2e';
-import {SlideToggleE2E} from './slide-toggle/slide-toggle-e2e';
-import {BasicTabs} from './tabs/tabs-e2e';
-import {VirtualScrollE2E} from './virtual-scroll/virtual-scroll-e2e';
-
-/**
- * NgModule that contains all Material modules that are required to serve the e2e-app.
- */
-@NgModule({
-  exports: [
-    MatButtonModule,
-    MatCheckboxModule,
-    MatDialogModule,
-    MatDividerModule,
-    MatFormFieldModule,
-    MatGridListModule,
-    MatIconModule,
-    MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatRadioModule,
-    MatSidenavModule,
-    MatSlideToggleModule,
-    MatStepperModule,
-    MatTabsModule,
-    MatNativeDateModule,
-    ScrollingModule,
-    ExperimentalScrollingModule,
-    DialogModule,
-    DragDropModule,
-  ]
-})
-export class E2eMaterialModule {}
-
-@NgModule({
-  imports: [
-    BrowserModule,
-    RouterModule.forRoot(E2E_APP_ROUTES),
-    E2eMaterialModule,
-    NoopAnimationsModule,
-    ExampleModule,
-    ReactiveFormsModule
-  ],
-  declarations: [
-    BasicTabs,
-    ButtonE2E,
-    DialogE2E,
-    E2EApp,
-    GridListE2E,
-    Home,
-    IconE2E,
-    InputE2E,
-    MenuE2E,
-    ProgressBarE2E,
-    ProgressSpinnerE2E,
-    SidenavE2E,
-    SimpleCheckboxes,
-    SimpleRadioButtons,
-    SlideToggleE2E,
-    TestDialog,
-    BlockScrollStrategyE2E,
-    VirtualScrollE2E,
-  ],
-  bootstrap: [E2EApp],
-  entryComponents: [TestDialog]
-})
-export class E2eAppModule { }
diff --git a/src/e2e-app/e2e-app.ts b/src/e2e-app/e2e-app.ts
new file mode 100644
index 00000000000..1caa141bd64
--- /dev/null
+++ b/src/e2e-app/e2e-app.ts
@@ -0,0 +1,19 @@
+/**
+ * @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 {Component, ViewEncapsulation} from '@angular/core';
+
+/** Root component for the e2e-app demos. */
+@Component({
+  moduleId: module.id,
+  selector: 'e2e-app',
+  template: '<e2e-app-layout><router-outlet></router-outlet></e2e-app-layout>',
+  encapsulation: ViewEncapsulation.None,
+})
+export class E2eApp {
+}
diff --git a/src/e2e-app/e2e-app/e2e-app.html b/src/e2e-app/e2e-app/e2e-app-layout.html
similarity index 97%
rename from src/e2e-app/e2e-app/e2e-app.html
rename to src/e2e-app/e2e-app/e2e-app-layout.html
index 75c422514f4..4453a29bba4 100644
--- a/src/e2e-app/e2e-app/e2e-app.html
+++ b/src/e2e-app/e2e-app/e2e-app-layout.html
@@ -25,5 +25,5 @@
 </mat-nav-list>
 
 <main>
-  <router-outlet></router-outlet>
+  <ng-content></ng-content>
 </main>
diff --git a/src/e2e-app/e2e-app/e2e-app-layout.ts b/src/e2e-app/e2e-app/e2e-app-layout.ts
new file mode 100644
index 00000000000..8d55fc60a5b
--- /dev/null
+++ b/src/e2e-app/e2e-app/e2e-app-layout.ts
@@ -0,0 +1,16 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+
+@Component({selector: 'home', template: `<p>e2e website!</p>`})
+export class Home {
+}
+
+@Component({
+  moduleId: module.id,
+  selector: 'e2e-app-layout',
+  templateUrl: 'e2e-app-layout.html',
+  encapsulation: ViewEncapsulation.None,
+})
+export class E2eAppLayout {
+  showLinks: boolean = false;
+}
diff --git a/src/e2e-app/e2e-app/e2e-app-module.ts b/src/e2e-app/e2e-app/e2e-app-module.ts
new file mode 100644
index 00000000000..eda43f7dfe5
--- /dev/null
+++ b/src/e2e-app/e2e-app/e2e-app-module.ts
@@ -0,0 +1,30 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {GestureConfig, MatListModule} from '@angular/material';
+import {HAMMER_GESTURE_CONFIG} from '@angular/platform-browser';
+import {RouterModule} from '@angular/router';
+import {E2eAppLayout, Home} from './e2e-app-layout';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatListModule,
+    RouterModule,
+  ],
+  declarations: [E2eAppLayout, Home],
+  exports: [E2eAppLayout],
+
+  // We need to pass this in here, because the gesture config currently doesn't for lazy-loaded
+  // modules. See https://github.com/angular/material2/issues/4595#issuecomment-416641018.
+  providers: [{provide: HAMMER_GESTURE_CONFIG, useClass: GestureConfig}]
+})
+export class E2eAppModule {
+}
diff --git a/src/e2e-app/e2e-app/e2e-app.ts b/src/e2e-app/e2e-app/e2e-app.ts
deleted file mode 100644
index e45bf23906e..00000000000
--- a/src/e2e-app/e2e-app/e2e-app.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {Component, ViewEncapsulation} from '@angular/core';
-
-
-@Component({
-  selector: 'home',
-  template: `<p>e2e website!</p>`
-})
-export class Home {}
-
-@Component({
-  moduleId: module.id,
-  selector: 'e2e-app',
-  templateUrl: 'e2e-app.html',
-  encapsulation: ViewEncapsulation.None,
-})
-export class E2EApp {
-  showLinks: boolean = false;
-}
diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts
index 12c2d0c5833..775d9cdf72d 100644
--- a/src/e2e-app/e2e-app/routes.ts
+++ b/src/e2e-app/e2e-app/routes.ts
@@ -1,50 +1,48 @@
 import {Routes} from '@angular/router';
-import {VirtualScrollE2E} from '../virtual-scroll/virtual-scroll-e2e';
-import {Home} from './e2e-app';
+import {BlockScrollStrategyE2E} from '../block-scroll-strategy/block-scroll-strategy-e2e';
+import {ButtonToggleE2e} from '../button-toggle/button-toggle-e2e';
 import {ButtonE2E} from '../button/button-e2e';
-import {BasicTabs} from '../tabs/tabs-e2e';
-import {IconE2E} from '../icon/icon-e2e';
-import {MenuE2E} from '../menu/menu-e2e';
-import {SimpleRadioButtons} from '../radio/radio-e2e';
+import {CardE2e} from '../card/card-e2e';
 import {SimpleCheckboxes} from '../checkbox/checkbox-e2e';
 import {DialogE2E} from '../dialog/dialog-e2e';
+import {ExpansionE2e} from '../expansion/expansion-e2e';
 import {GridListE2E} from '../grid-list/grid-list-e2e';
+import {IconE2E} from '../icon/icon-e2e';
+import {InputE2E} from '../input/input-e2e';
+import {ListE2e} from '../list/list-e2e';
+import {MenuE2E} from '../menu/menu-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
-import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
-import {InputE2E} from '../input/input-e2e';
+import {SimpleRadioButtons} from '../radio/radio-e2e';
 import {SidenavE2E} from '../sidenav/sidenav-e2e';
-import {BlockScrollStrategyE2E} from '../block-scroll-strategy/block-scroll-strategy-e2e';
-import {
-  CardFancyExample,
-  ListOverviewExample,
-  ToolbarMultirowExample,
-  ButtonToggleOverviewExample,
-  ExpansionOverviewExample,
-  StepperOverviewExample
-} from '@angular/material-examples';
+import {SlideToggleE2E} from '../slide-toggle/slide-toggle-e2e';
+import {StepperE2e} from '../stepper/stepper-e2e';
+import {BasicTabs} from '../tabs/tabs-e2e';
+import {ToolbarE2e} from '../toolbar/toolbar-e2e';
+import {VirtualScrollE2E} from '../virtual-scroll/virtual-scroll-e2e';
+import {Home} from './e2e-app-layout';
 
 export const E2E_APP_ROUTES: Routes = [
   {path: '', component: Home},
   {path: 'block-scroll-strategy', component: BlockScrollStrategyE2E},
   {path: 'button', component: ButtonE2E},
-  {path: 'button-toggle', component: ButtonToggleOverviewExample},
+  {path: 'button-toggle', component: ButtonToggleE2e},
   {path: 'checkbox', component: SimpleCheckboxes},
   {path: 'dialog', component: DialogE2E},
-  {path: 'expansion', component: ExpansionOverviewExample},
+  {path: 'expansion', component: ExpansionE2e},
   {path: 'grid-list', component: GridListE2E},
   {path: 'icon', component: IconE2E},
   {path: 'input', component: InputE2E},
-  {path: 'list', component: ListOverviewExample},
+  {path: 'list', component: ListE2e},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},
   {path: 'radio', component: SimpleRadioButtons},
   {path: 'sidenav', component: SidenavE2E},
   {path: 'slide-toggle', component: SlideToggleE2E},
-  {path: 'stepper', component: StepperOverviewExample},
+  {path: 'stepper', component: StepperE2e},
   {path: 'tabs', component: BasicTabs},
-  {path: 'cards', component: CardFancyExample},
-  {path: 'toolbar', component: ToolbarMultirowExample},
+  {path: 'cards', component: CardE2e},
+  {path: 'toolbar', component: ToolbarE2e},
   {path: 'virtual-scroll', component: VirtualScrollE2E},
 ];
diff --git a/src/e2e-app/example-viewer/example-list-viewer.component.ts b/src/e2e-app/example-viewer/example-list-viewer.component.ts
new file mode 100644
index 00000000000..dd8da6ab46a
--- /dev/null
+++ b/src/e2e-app/example-viewer/example-list-viewer.component.ts
@@ -0,0 +1,21 @@
+/**
+ * @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 {Component, Input} from '@angular/core';
+
+/** Loads an example component from `@angular/material-examples`. */
+@Component({
+  selector: 'example-list-viewer',
+  template: `
+    <example-viewer *ngFor="let id of ids" [id]="id"></example-viewer>
+  `,
+})
+export class ExampleListViewer {
+  /** IDs of the examples to display. */
+  @Input() ids: string[];
+}
diff --git a/src/e2e-app/example-viewer/example-viewer-module.ts b/src/e2e-app/example-viewer/example-viewer-module.ts
new file mode 100644
index 00000000000..13eacb6ddfa
--- /dev/null
+++ b/src/e2e-app/example-viewer/example-viewer-module.ts
@@ -0,0 +1,21 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ExampleModule as ExampleDataModule} from '@angular/material-examples';
+import {ExampleListViewer} from './example-list-viewer.component';
+import {ExampleViewer} from './example-viewer';
+
+@NgModule({
+  imports: [CommonModule, ExampleDataModule],
+  declarations: [ExampleViewer, ExampleListViewer],
+  exports: [ExampleViewer, ExampleListViewer]
+})
+export class ExampleViewerModule {
+}
diff --git a/src/e2e-app/example-viewer/example-viewer.ts b/src/e2e-app/example-viewer/example-viewer.ts
new file mode 100644
index 00000000000..ad8ee4185e3
--- /dev/null
+++ b/src/e2e-app/example-viewer/example-viewer.ts
@@ -0,0 +1,40 @@
+/**
+ * @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 {Component, ElementRef, Injector, Input, OnInit} from '@angular/core';
+import {createCustomElement} from '@angular/elements';
+import {EXAMPLE_COMPONENTS} from '@angular/material-examples';
+
+/** Loads an example component from `@angular/material-examples` */
+@Component({
+  selector: 'example-viewer',
+  template: `
+    <div *ngIf="!id">
+      Could not find example {{id}}
+    </div>
+  `,
+})
+export class ExampleViewer implements OnInit {
+  /** ID of the material example to display. */
+  @Input() id: string;
+
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _injector: Injector) {}
+
+  ngOnInit() {
+    let exampleElementCtor = customElements.get(this.id);
+
+    if (!exampleElementCtor) {
+      exampleElementCtor =
+          createCustomElement(EXAMPLE_COMPONENTS[this.id].component, {injector: this._injector});
+
+      customElements.define(this.id, exampleElementCtor);
+    }
+
+    this._elementRef.nativeElement.appendChild(new exampleElementCtor(this._injector));
+  }
+}
diff --git a/src/e2e-app/expansion/expansion-e2e-module.ts b/src/e2e-app/expansion/expansion-e2e-module.ts
new file mode 100644
index 00000000000..88d76f82b15
--- /dev/null
+++ b/src/e2e-app/expansion/expansion-e2e-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {ExpansionE2e} from './expansion-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ExpansionE2e],
+})
+export class ExpansionE2eModule {
+}
diff --git a/src/e2e-app/expansion/expansion-e2e.ts b/src/e2e-app/expansion/expansion-e2e.ts
new file mode 100644
index 00000000000..bc9d6a66a4c
--- /dev/null
+++ b/src/e2e-app/expansion/expansion-e2e.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'expansion-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ExpansionE2e {
+  examples = ['expansion-overview'];
+}
diff --git a/src/e2e-app/grid-list/grid-list-e2e-module.ts b/src/e2e-app/grid-list/grid-list-e2e-module.ts
new file mode 100644
index 00000000000..dba3aeb2e9c
--- /dev/null
+++ b/src/e2e-app/grid-list/grid-list-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatGridListModule} from '@angular/material';
+import {GridListE2E} from './grid-list-e2e';
+
+@NgModule({
+  imports: [MatGridListModule],
+  declarations: [GridListE2E],
+})
+export class GridListE2eModule {
+}
diff --git a/src/e2e-app/icon/icon-e2e-module.ts b/src/e2e-app/icon/icon-e2e-module.ts
new file mode 100644
index 00000000000..2a7271c530e
--- /dev/null
+++ b/src/e2e-app/icon/icon-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatIconModule} from '@angular/material';
+import {IconE2E} from './icon-e2e';
+
+@NgModule({
+  imports: [MatIconModule],
+  declarations: [IconE2E],
+})
+export class IconE2eModule {
+}
diff --git a/src/e2e-app/index.html b/src/e2e-app/index.html
index 6b8d0b685c0..5b1eecbe38c 100644
--- a/src/e2e-app/index.html
+++ b/src/e2e-app/index.html
@@ -13,6 +13,14 @@
 
   <!-- FontAwesome for mat-icon demo. -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
+
+  <!-- Angular Elements setup. -->
+  <script>
+    if (window.customElements) {
+      window.customElements.forcePolyfill = true;
+    }
+  </script>
+  <script src="@webcomponents/custom-elements/custom-elements.min.js"></script>
 </head>
 <body>
   <e2e-app>Loading...</e2e-app>
diff --git a/src/e2e-app/input/input-e2e-module.ts b/src/e2e-app/input/input-e2e-module.ts
new file mode 100644
index 00000000000..3fe485be88b
--- /dev/null
+++ b/src/e2e-app/input/input-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatFormFieldModule, MatInputModule} from '@angular/material';
+import {InputE2E} from './input-e2e';
+
+@NgModule({
+  imports: [MatFormFieldModule, MatInputModule],
+  declarations: [InputE2E],
+})
+export class InputE2eModule {
+}
diff --git a/src/e2e-app/list/list-e2e-module.ts b/src/e2e-app/list/list-e2e-module.ts
new file mode 100644
index 00000000000..6d3dffeba73
--- /dev/null
+++ b/src/e2e-app/list/list-e2e-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {ListE2e} from './list-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ListE2e],
+})
+export class ListE2eModule {
+}
diff --git a/src/e2e-app/list/list-e2e.ts b/src/e2e-app/list/list-e2e.ts
new file mode 100644
index 00000000000..41a432e4109
--- /dev/null
+++ b/src/e2e-app/list/list-e2e.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'list-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ListE2e {
+  examples = ['list-overview'];
+}
diff --git a/src/e2e-app/main-module.ts b/src/e2e-app/main-module.ts
new file mode 100644
index 00000000000..673acafc103
--- /dev/null
+++ b/src/e2e-app/main-module.ts
@@ -0,0 +1,68 @@
+import {NgModule} from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {RouterModule} from '@angular/router';
+import {
+  BlockScrollStrategyE2eModule
+} from './block-scroll-strategy/block-scroll-strategy-e2e-module';
+import {ButtonToggleE2eModule} from './button-toggle/button-toggle-e2e-module';
+import {ButtonE2eModule} from './button/button-e2e-module';
+import {CardE2eModule} from './card/card-e2e-module';
+import {CheckboxE2eModule} from './checkbox/checkbox-e2e-module';
+import {DialogE2eModule} from './dialog/dialog-e2e-module';
+import {E2eApp} from './e2e-app';
+import {E2eAppModule} from './e2e-app/e2e-app-module';
+import {E2E_APP_ROUTES} from './e2e-app/routes';
+import {ExpansionE2eModule} from './expansion/expansion-e2e-module';
+import {GridListE2eModule} from './grid-list/grid-list-e2e-module';
+import {IconE2eModule} from './icon/icon-e2e-module';
+import {InputE2eModule} from './input/input-e2e-module';
+import {ListE2eModule} from './list/list-e2e-module';
+import {MenuE2eModule} from './menu/menu-e2e-module';
+import {ProgressBarE2eModule} from './progress-bar/progress-bar-e2e-module';
+import {ProgressSpinnerE2eModule} from './progress-spinner/progress-spinner-e2e-module';
+import {RadioE2eModule} from './radio/radio-e2e-module';
+import {SidenavE2eModule} from './sidenav/sidenav-e2e-module';
+import {SlideToggleE2eModule} from './slide-toggle/slide-toggle-e2e-module';
+import {StepperE2eModule} from './stepper/stepper-e2e-module';
+import {TabsE2eModule} from './tabs/tabs-e2e-module';
+import {ToolbarE2eModule} from './toolbar/toolbar-e2e-module';
+import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module';
+
+@NgModule({
+  imports: [
+    BrowserModule,
+    E2eAppModule,
+    NoopAnimationsModule,
+    RouterModule.forRoot(E2E_APP_ROUTES),
+
+    // E2E demos
+    BlockScrollStrategyE2eModule,
+    ButtonE2eModule,
+    ButtonToggleE2eModule,
+    CardE2eModule,
+    CheckboxE2eModule,
+    DialogE2eModule,
+    ExpansionE2eModule,
+    GridListE2eModule,
+    IconE2eModule,
+    InputE2eModule,
+    ListE2eModule,
+    MenuE2eModule,
+    ProgressBarE2eModule,
+    ProgressSpinnerE2eModule,
+    RadioE2eModule,
+    SidenavE2eModule,
+    SlideToggleE2eModule,
+    StepperE2eModule,
+    TabsE2eModule,
+    ToolbarE2eModule,
+    VirtualScrollE2eModule,
+  ],
+  declarations: [
+    E2eApp,
+  ],
+  bootstrap: [E2eApp],
+})
+export class MainModule {
+}
diff --git a/src/e2e-app/main.ts b/src/e2e-app/main.ts
index 361873c20f2..3204e4f5d81 100644
--- a/src/e2e-app/main.ts
+++ b/src/e2e-app/main.ts
@@ -1,7 +1,8 @@
-import {platformBrowser} from '@angular/platform-browser';
-import {E2eAppModuleNgFactory} from './e2e-app-module.ngfactory';
 import {enableProdMode} from '@angular/core';
+import {platformBrowser} from '@angular/platform-browser';
+
+import {MainModuleNgFactory} from './main-module.ngfactory';
 
 enableProdMode();
 
-platformBrowser().bootstrapModuleFactory(E2eAppModuleNgFactory);
+platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);
diff --git a/src/e2e-app/menu/menu-e2e-module.ts b/src/e2e-app/menu/menu-e2e-module.ts
new file mode 100644
index 00000000000..7cbac2cd904
--- /dev/null
+++ b/src/e2e-app/menu/menu-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatMenuModule} from '@angular/material';
+import {MenuE2E} from './menu-e2e';
+
+@NgModule({
+  imports: [MatMenuModule],
+  declarations: [MenuE2E],
+})
+export class MenuE2eModule {
+}
diff --git a/src/e2e-app/progress-bar/progress-bar-e2e-module.ts b/src/e2e-app/progress-bar/progress-bar-e2e-module.ts
new file mode 100644
index 00000000000..78cbf8acd03
--- /dev/null
+++ b/src/e2e-app/progress-bar/progress-bar-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatProgressBarModule} from '@angular/material';
+import {ProgressBarE2E} from './progress-bar-e2e';
+
+@NgModule({
+  imports: [MatProgressBarModule],
+  declarations: [ProgressBarE2E],
+})
+export class ProgressBarE2eModule {
+}
diff --git a/src/e2e-app/progress-spinner/progress-spinner-e2e-module.ts b/src/e2e-app/progress-spinner/progress-spinner-e2e-module.ts
new file mode 100644
index 00000000000..eb344719232
--- /dev/null
+++ b/src/e2e-app/progress-spinner/progress-spinner-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatProgressSpinnerModule} from '@angular/material';
+import {ProgressSpinnerE2E} from './progress-spinner-e2e';
+
+@NgModule({
+  imports: [MatProgressSpinnerModule],
+  declarations: [ProgressSpinnerE2E],
+})
+export class ProgressSpinnerE2eModule {
+}
diff --git a/src/e2e-app/radio/radio-e2e-module.ts b/src/e2e-app/radio/radio-e2e-module.ts
new file mode 100644
index 00000000000..5ffe835183d
--- /dev/null
+++ b/src/e2e-app/radio/radio-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatRadioModule} from '@angular/material';
+import {SimpleRadioButtons} from './radio-e2e';
+
+@NgModule({
+  imports: [MatRadioModule],
+  declarations: [SimpleRadioButtons],
+})
+export class RadioE2eModule {
+}
diff --git a/src/e2e-app/sidenav/sidenav-e2e-module.ts b/src/e2e-app/sidenav/sidenav-e2e-module.ts
new file mode 100644
index 00000000000..0f6800698b7
--- /dev/null
+++ b/src/e2e-app/sidenav/sidenav-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatSidenavModule} from '@angular/material';
+import {SidenavE2E} from './sidenav-e2e';
+
+@NgModule({
+  imports: [MatSidenavModule],
+  declarations: [SidenavE2E],
+})
+export class SidenavE2eModule {
+}
diff --git a/src/e2e-app/slide-toggle/slide-toggle-e2e-module.ts b/src/e2e-app/slide-toggle/slide-toggle-e2e-module.ts
new file mode 100644
index 00000000000..e7d57b88bfa
--- /dev/null
+++ b/src/e2e-app/slide-toggle/slide-toggle-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatSlideToggleModule} from '@angular/material';
+import {SlideToggleE2E} from './slide-toggle-e2e';
+
+@NgModule({
+  imports: [MatSlideToggleModule],
+  declarations: [SlideToggleE2E],
+})
+export class SlideToggleE2eModule {
+}
diff --git a/src/e2e-app/stepper/stepper-e2e-module.ts b/src/e2e-app/stepper/stepper-e2e-module.ts
new file mode 100644
index 00000000000..7a8281348f4
--- /dev/null
+++ b/src/e2e-app/stepper/stepper-e2e-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {StepperE2e} from './stepper-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [StepperE2e],
+})
+export class StepperE2eModule {
+}
diff --git a/src/e2e-app/stepper/stepper-e2e.ts b/src/e2e-app/stepper/stepper-e2e.ts
new file mode 100644
index 00000000000..d255eaeb83c
--- /dev/null
+++ b/src/e2e-app/stepper/stepper-e2e.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'stepper-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class StepperE2e {
+  examples = ['stepper-overview'];
+}
diff --git a/src/e2e-app/tabs/tabs-e2e-module.ts b/src/e2e-app/tabs/tabs-e2e-module.ts
new file mode 100644
index 00000000000..0d13e724793
--- /dev/null
+++ b/src/e2e-app/tabs/tabs-e2e-module.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {MatFormFieldModule, MatInputModule, MatTabsModule} from '@angular/material';
+import {BasicTabs} from './tabs-e2e';
+
+@NgModule({
+  imports: [MatTabsModule, MatFormFieldModule, MatInputModule],
+  declarations: [BasicTabs],
+})
+export class TabsE2eModule {
+}
diff --git a/src/e2e-app/toolbar/toolbar-e2e-module.ts b/src/e2e-app/toolbar/toolbar-e2e-module.ts
new file mode 100644
index 00000000000..ac81b925050
--- /dev/null
+++ b/src/e2e-app/toolbar/toolbar-e2e-module.ts
@@ -0,0 +1,20 @@
+/**
+ * @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 {NgModule} from '@angular/core';
+import {ExampleViewerModule} from '../example-viewer/example-viewer-module';
+import {ToolbarE2e} from './toolbar-e2e';
+
+@NgModule({
+  imports: [
+    ExampleViewerModule,
+  ],
+  declarations: [ToolbarE2e],
+})
+export class ToolbarE2eModule {
+}
diff --git a/src/e2e-app/toolbar/toolbar-e2e.ts b/src/e2e-app/toolbar/toolbar-e2e.ts
new file mode 100644
index 00000000000..89566478503
--- /dev/null
+++ b/src/e2e-app/toolbar/toolbar-e2e.ts
@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'toolbar-demo',
+  template: `<example-list-viewer [ids]="examples"></example-list-viewer>`,
+})
+export class ToolbarE2e {
+  examples = ['toolbar-multirow'];
+}
diff --git a/src/e2e-app/virtual-scroll/virtual-scroll-e2e-module.ts b/src/e2e-app/virtual-scroll/virtual-scroll-e2e-module.ts
new file mode 100644
index 00000000000..d4579c98cc1
--- /dev/null
+++ b/src/e2e-app/virtual-scroll/virtual-scroll-e2e-module.ts
@@ -0,0 +1,19 @@
+/**
+ * @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 {ScrollingModule as ExperimentalScrollingModule} from '@angular/cdk-experimental/scrolling';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {NgModule} from '@angular/core';
+import {VirtualScrollE2E} from './virtual-scroll-e2e';
+
+@NgModule({
+  imports: [ScrollingModule, ExperimentalScrollingModule],
+  declarations: [VirtualScrollE2E],
+})
+export class VirtualScrollE2eModule {
+}