diff --git a/demos/src/app/app-routing.module.ts b/demos/src/app/app-routing.module.ts
index 2233ef5d3..f050eca65 100644
--- a/demos/src/app/app-routing.module.ts
+++ b/demos/src/app/app-routing.module.ts
@@ -55,7 +55,7 @@ const routes: Routes = [
       import('./components/linear-progress/module').then(m => m.LinearProgressModule)
   },
   {path: 'list-demo', loadChildren: () => import('./components/list-demo/list.module').then(m => m.ListModule)},
-  {path: 'menu-demo', loadChildren: () => import('./components/menu-demo/menu.module').then(m => m.MenuModule)},
+  {path: 'menu-demo', loadChildren: () => import('./components/menu/module').then(m => m.MenuModule)},
   {
     path: 'menu-surface-demo', loadChildren: () =>
       import('./components/menu-surface/module').then(m => m.MenuSurfaceModule)
@@ -73,11 +73,11 @@ const routes: Routes = [
   {path: 'tabs-demo', loadChildren: () => import('./components/tabs-demo/tabs.module').then(m => m.TabsModule)},
   {
     path: 'text-field-demo', loadChildren: () =>
-      import('./components/text-field-demo/text-field.module').then(m => m.TextFieldModule)
+      import('./components/text-field/module').then(m => m.TextFieldModule)
   },
   {
     path: 'top-app-bar-demo', loadChildren: () =>
-      import('./components/top-app-bar-demo/top-app-bar.module').then(m => m.TopAppBarModule)
+      import('./components/top-app-bar/module').then(m => m.TopAppBarModule)
   },
   {
     path: 'typography-demo', loadChildren: () =>
diff --git a/demos/src/app/components/menu-demo/menu.module.ts b/demos/src/app/components/menu-demo/menu.module.ts
deleted file mode 100644
index b7112070a..000000000
--- a/demos/src/app/components/menu-demo/menu.module.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-
-import { SharedModule } from '../../shared.module';
-import { RoutingModule, ROUTE_DECLARATIONS } from './routing.module';
-
-@NgModule({
-  imports: [
-    SharedModule,
-    RoutingModule
-  ],
-  declarations: [ROUTE_DECLARATIONS]
-})
-export class MenuModule { }
diff --git a/demos/src/app/components/menu-demo/routing.module.ts b/demos/src/app/components/menu-demo/routing.module.ts
deleted file mode 100644
index 4a8853a68..000000000
--- a/demos/src/app/components/menu-demo/routing.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { Api, Examples, Sass, MenuDemo } from './menu-demo';
-
-export const ROUTE_DECLARATIONS = [
-  Api,
-  Examples,
-  Sass,
-  MenuDemo
-];
-
-const ROUTES: Routes = [
-  {
-    path: '', component: MenuDemo,
-    children: [
-      { path: '', redirectTo: 'api' },
-      { path: 'api', component: Api },
-      { path: 'sass', component: Sass },
-      { path: 'examples', component: Examples }
-    ]
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(ROUTES)],
-  exports: [RouterModule]
-})
-export class RoutingModule { }
diff --git a/demos/src/app/components/menu-demo/api.html b/demos/src/app/components/menu/api.html
similarity index 100%
rename from demos/src/app/components/menu-demo/api.html
rename to demos/src/app/components/menu/api.html
diff --git a/demos/src/app/components/menu-demo/examples.html b/demos/src/app/components/menu/examples.html
similarity index 100%
rename from demos/src/app/components/menu-demo/examples.html
rename to demos/src/app/components/menu/examples.html
diff --git a/demos/src/app/components/menu-demo/menu-demo.ts b/demos/src/app/components/menu/menu.ts
similarity index 98%
rename from demos/src/app/components/menu-demo/menu-demo.ts
rename to demos/src/app/components/menu/menu.ts
index 846639d1b..42d1bbe15 100644
--- a/demos/src/app/components/menu-demo/menu-demo.ts
+++ b/demos/src/app/components/menu/menu.ts
@@ -4,7 +4,7 @@ import {MdcListItem} from '@angular-mdc/web';
 import {ComponentViewer} from '../../shared/component-viewer';
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class MenuDemo implements OnInit {
+export class Menu implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -20,7 +20,9 @@ export class MenuDemo implements OnInit {
       }],
       code: `import {MdcMenuModule} from '@angular-mdc/web';`,
       sass: `@use '@material/menu/mdc-menu';
-@use '@material/menu';`
+@use '@material/menu';
+@use '@material/list/mdc-list';
+@use '@material/menu-surface/mdc-menu-surface';`
     };
   }
 }
diff --git a/demos/src/app/components/menu/module.ts b/demos/src/app/components/menu/module.ts
new file mode 100644
index 000000000..75ebe5188
--- /dev/null
+++ b/demos/src/app/components/menu/module.ts
@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+
+import {SharedModule} from '../../shared.module';
+import {RoutingModule, ROUTE_DECLARATIONS} from './routing.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    RoutingModule
+  ],
+  declarations: [ROUTE_DECLARATIONS]
+})
+export class MenuModule {}
diff --git a/demos/src/app/components/text-field-demo/routing.module.ts b/demos/src/app/components/menu/routing.module.ts
similarity index 79%
rename from demos/src/app/components/text-field-demo/routing.module.ts
rename to demos/src/app/components/menu/routing.module.ts
index 01499738f..3038f69d6 100644
--- a/demos/src/app/components/text-field-demo/routing.module.ts
+++ b/demos/src/app/components/menu/routing.module.ts
@@ -1,18 +1,18 @@
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 
-import {Api, Examples, Sass, TextFieldDemo} from './text-field-demo';
+import {Api, Examples, Sass, Menu} from './menu';
 
 export const ROUTE_DECLARATIONS = [
   Api,
   Examples,
   Sass,
-  TextFieldDemo
+  Menu
 ];
 
 const ROUTES: Routes = [
   {
-    path: '', component: TextFieldDemo,
+    path: '', component: Menu,
     children: [
       {path: '', redirectTo: 'api'},
       {path: 'api', component: Api},
diff --git a/demos/src/app/components/menu-demo/sass.html b/demos/src/app/components/menu/sass.html
similarity index 100%
rename from demos/src/app/components/menu-demo/sass.html
rename to demos/src/app/components/menu/sass.html
diff --git a/demos/src/app/components/radio/radio.ts b/demos/src/app/components/radio/radio.ts
index d1e84564a..f1f9dd6c1 100644
--- a/demos/src/app/components/radio/radio.ts
+++ b/demos/src/app/components/radio/radio.ts
@@ -22,7 +22,8 @@ export class Radio implements OnInit {
       }],
       code: `import {MdcRadioModule} from '@angular-mdc/web';`,
       sass: `@use '@material/radio/mdc-radio';
-@use '@material/radio';`
+@use '@material/radio';
+@use '@material/form-field/mdc-form-field';`
     };
   }
 }
diff --git a/demos/src/app/components/select/select.ts b/demos/src/app/components/select/select.ts
index e2f57ca3b..dcf3cf5fd 100644
--- a/demos/src/app/components/select/select.ts
+++ b/demos/src/app/components/select/select.ts
@@ -26,7 +26,10 @@ export class Select implements OnInit {
       }],
       code: `import {MdcSelectModule} from '@angular-mdc/web';`,
       sass: `@use '@material/select/mdc-select';
-@use '@material/select';`
+@use '@material/select';
+@use '@material/list/mdc-list';
+@use '@material/menu-surface/mdc-menu-surface';
+@use '@material/menu/mdc-menu';`
     };
   }
 }
diff --git a/demos/src/app/components/text-field-demo/api.html b/demos/src/app/components/text-field/api.html
similarity index 100%
rename from demos/src/app/components/text-field-demo/api.html
rename to demos/src/app/components/text-field/api.html
diff --git a/demos/src/app/components/text-field-demo/examples.html b/demos/src/app/components/text-field/examples.html
similarity index 100%
rename from demos/src/app/components/text-field-demo/examples.html
rename to demos/src/app/components/text-field/examples.html
diff --git a/demos/src/app/components/text-field-demo/text-field.module.ts b/demos/src/app/components/text-field/module.ts
similarity index 100%
rename from demos/src/app/components/text-field-demo/text-field.module.ts
rename to demos/src/app/components/text-field/module.ts
diff --git a/demos/src/app/components/text-field/routing.module.ts b/demos/src/app/components/text-field/routing.module.ts
new file mode 100644
index 000000000..f4fca4d13
--- /dev/null
+++ b/demos/src/app/components/text-field/routing.module.ts
@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, TextField} from './text-field';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  TextField
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: TextField,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}
diff --git a/demos/src/app/components/text-field-demo/sass.html b/demos/src/app/components/text-field/sass.html
similarity index 100%
rename from demos/src/app/components/text-field-demo/sass.html
rename to demos/src/app/components/text-field/sass.html
diff --git a/demos/src/app/components/text-field-demo/text-field-demo.ts b/demos/src/app/components/text-field/text-field.ts
similarity index 99%
rename from demos/src/app/components/text-field-demo/text-field-demo.ts
rename to demos/src/app/components/text-field/text-field.ts
index db9d29a07..0feff1252 100644
--- a/demos/src/app/components/text-field-demo/text-field-demo.ts
+++ b/demos/src/app/components/text-field/text-field.ts
@@ -15,7 +15,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher {
 }
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class TextFieldDemo implements OnInit {
+export class TextField implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -31,7 +31,8 @@ export class TextFieldDemo implements OnInit {
       }],
       code: `import {MdcTextFieldModule} from '@angular-mdc/web';`,
       sass: `@use '@material/textfield/mdc-text-field';
-@use '@material/textfield';`
+@use '@material/textfield';
+@use '@material/form-field/mdc-form-field';`
     };
   }
 }
diff --git a/demos/src/app/components/top-app-bar-demo/routing.module.ts b/demos/src/app/components/top-app-bar-demo/routing.module.ts
deleted file mode 100644
index 026886884..000000000
--- a/demos/src/app/components/top-app-bar-demo/routing.module.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { Routes, RouterModule } from '@angular/router';
-
-import { Api, Examples, Sass, TopAppBarDemo } from './top-app-bar-demo';
-
-export const ROUTE_DECLARATIONS = [
-  Api,
-  Examples,
-  Sass,
-  TopAppBarDemo
-];
-
-const ROUTES: Routes = [
-  {
-    path: '', component: TopAppBarDemo,
-    children: [
-      { path: '', redirectTo: 'api' },
-      { path: 'api', component: Api },
-      { path: 'sass', component: Sass },
-      { path: 'examples', component: Examples }
-    ]
-  }
-];
-
-@NgModule({
-  imports: [RouterModule.forChild(ROUTES)],
-  exports: [RouterModule]
-})
-export class RoutingModule { }
diff --git a/demos/src/app/components/top-app-bar-demo/api.html b/demos/src/app/components/top-app-bar/api.html
similarity index 100%
rename from demos/src/app/components/top-app-bar-demo/api.html
rename to demos/src/app/components/top-app-bar/api.html
diff --git a/demos/src/app/components/top-app-bar-demo/examples.html b/demos/src/app/components/top-app-bar/examples.html
similarity index 100%
rename from demos/src/app/components/top-app-bar-demo/examples.html
rename to demos/src/app/components/top-app-bar/examples.html
diff --git a/demos/src/app/components/top-app-bar-demo/top-app-bar.module.ts b/demos/src/app/components/top-app-bar/module.ts
similarity index 100%
rename from demos/src/app/components/top-app-bar-demo/top-app-bar.module.ts
rename to demos/src/app/components/top-app-bar/module.ts
diff --git a/demos/src/app/components/top-app-bar/routing.module.ts b/demos/src/app/components/top-app-bar/routing.module.ts
new file mode 100644
index 000000000..bb08eaa9e
--- /dev/null
+++ b/demos/src/app/components/top-app-bar/routing.module.ts
@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+
+import {Api, Examples, Sass, TopAppBar} from './top-app-bar';
+
+export const ROUTE_DECLARATIONS = [
+  Api,
+  Examples,
+  Sass,
+  TopAppBar
+];
+
+const ROUTES: Routes = [
+  {
+    path: '', component: TopAppBar,
+    children: [
+      {path: '', redirectTo: 'api'},
+      {path: 'api', component: Api},
+      {path: 'sass', component: Sass},
+      {path: 'examples', component: Examples}
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(ROUTES)],
+  exports: [RouterModule]
+})
+export class RoutingModule {}
diff --git a/demos/src/app/components/top-app-bar-demo/sass.html b/demos/src/app/components/top-app-bar/sass.html
similarity index 100%
rename from demos/src/app/components/top-app-bar-demo/sass.html
rename to demos/src/app/components/top-app-bar/sass.html
diff --git a/demos/src/app/components/top-app-bar-demo/top-app-bar-demo.ts b/demos/src/app/components/top-app-bar/top-app-bar.ts
similarity index 98%
rename from demos/src/app/components/top-app-bar-demo/top-app-bar-demo.ts
rename to demos/src/app/components/top-app-bar/top-app-bar.ts
index 2df675317..515214786 100644
--- a/demos/src/app/components/top-app-bar-demo/top-app-bar-demo.ts
+++ b/demos/src/app/components/top-app-bar/top-app-bar.ts
@@ -3,7 +3,7 @@ import {Component, OnInit, ViewChild} from '@angular/core';
 import {ComponentViewer} from '../../shared/component-viewer';
 
 @Component({template: '<component-viewer></component-viewer>'})
-export class TopAppBarDemo implements OnInit {
+export class TopAppBar implements OnInit {
   @ViewChild(ComponentViewer, {static: true}) _componentViewer: ComponentViewer;
 
   ngOnInit(): void {
@@ -19,7 +19,8 @@ export class TopAppBarDemo implements OnInit {
       }],
       code: `import {MdcTopAppBarModule} from '@angular-mdc/web';`,
       sass: `@use '@material/top-app-bar/mdc-top-app-bar';
-@use '@material/top-app-bar';`
+@use '@material/top-app-bar';
+@use '@material/icon-button/mdc-icon-button';`
     };
   }
 }