diff --git a/src/components-examples/material/toolbar/BUILD.bazel b/src/components-examples/material/toolbar/BUILD.bazel
index b0053407252c..52f2a89b5b8f 100644
--- a/src/components-examples/material/toolbar/BUILD.bazel
+++ b/src/components-examples/material/toolbar/BUILD.bazel
@@ -11,6 +11,7 @@ ng_module(
]),
module_name = "@angular/components-examples/material/toolbar",
deps = [
+ "//src/material/button",
"//src/material/icon",
"//src/material/toolbar",
],
diff --git a/src/components-examples/material/toolbar/index.ts b/src/components-examples/material/toolbar/index.ts
index 46c434f8f024..2a8e778d5600 100644
--- a/src/components-examples/material/toolbar/index.ts
+++ b/src/components-examples/material/toolbar/index.ts
@@ -1,21 +1,26 @@
import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
import {MatIconModule} from '@angular/material/icon';
import {MatToolbarModule} from '@angular/material/toolbar';
+import {ToolbarBasicExample} from './toolbar-basic/toolbar-basic-example';
import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
import {ToolbarOverviewExample} from './toolbar-overview/toolbar-overview-example';
export {
+ ToolbarBasicExample,
ToolbarMultirowExample,
ToolbarOverviewExample,
};
const EXAMPLES = [
+ ToolbarBasicExample,
ToolbarMultirowExample,
ToolbarOverviewExample,
];
@NgModule({
imports: [
+ MatButtonModule,
MatIconModule,
MatToolbarModule,
],
diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css
new file mode 100644
index 000000000000..9633d1593c37
--- /dev/null
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.css
@@ -0,0 +1,3 @@
+.example-spacer {
+ flex: 1 1 auto;
+}
diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
new file mode 100644
index 000000000000..5499e0bd14e9
--- /dev/null
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.html
@@ -0,0 +1,13 @@
+
+
+ My App
+
+
+
+
diff --git a/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts
new file mode 100644
index 000000000000..26926aeb7721
--- /dev/null
+++ b/src/components-examples/material/toolbar/toolbar-basic/toolbar-basic-example.ts
@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Basic toolbar
+ */
+@Component({
+ selector: 'toolbar-basic-example',
+ templateUrl: 'toolbar-basic-example.html',
+ styleUrls: ['toolbar-basic-example.css'],
+})
+export class ToolbarBasicExample {}
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css
index 7432308753e6..9633d1593c37 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.css
@@ -1 +1,3 @@
-/** No CSS for this example */
+.example-spacer {
+ flex: 1 1 auto;
+}
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
index 05520fda8642..885fbfccb41c 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html
@@ -1 +1,54 @@
-My App
+
+
+
+ My App
+
+
+
+
+
+
+
+
+
+ My App
+
+
+
+
+
+
+
+
+
+ My App
+
+
+
+
+
+ Second Line
+
+
+
+
+
+
diff --git a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
index a6de4d6ad2c5..c45e57c01bdb 100644
--- a/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
+++ b/src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.ts
@@ -1,7 +1,7 @@
import {Component} from '@angular/core';
/**
- * @title Basic toolbar
+ * @title Toolbar overview
*/
@Component({
selector: 'toolbar-overview-example',
diff --git a/src/dev-app/toolbar/BUILD.bazel b/src/dev-app/toolbar/BUILD.bazel
index 4c41472adba0..c3597bfcd35c 100644
--- a/src/dev-app/toolbar/BUILD.bazel
+++ b/src/dev-app/toolbar/BUILD.bazel
@@ -10,6 +10,7 @@ ng_module(
":toolbar_demo_scss",
],
deps = [
+ "//src/components-examples/material/toolbar",
"//src/material/button",
"//src/material/form-field",
"//src/material/icon",
diff --git a/src/dev-app/toolbar/toolbar-demo-module.ts b/src/dev-app/toolbar/toolbar-demo-module.ts
index 5626df14db3e..0529dcdae599 100644
--- a/src/dev-app/toolbar/toolbar-demo-module.ts
+++ b/src/dev-app/toolbar/toolbar-demo-module.ts
@@ -15,6 +15,7 @@ import {MatSelectModule} from '@angular/material/select';
import {MatToolbarModule} from '@angular/material/toolbar';
import {RouterModule} from '@angular/router';
import {ToolbarDemo} from './toolbar-demo';
+import {ToolbarExamplesModule} from '@angular/components-examples/material/toolbar';
@NgModule({
imports: [
@@ -24,6 +25,7 @@ import {ToolbarDemo} from './toolbar-demo';
MatInputModule,
MatSelectModule,
MatToolbarModule,
+ ToolbarExamplesModule,
RouterModule.forChild([{path: '', component: ToolbarDemo}]),
],
declarations: [ToolbarDemo],
diff --git a/src/dev-app/toolbar/toolbar-demo.html b/src/dev-app/toolbar/toolbar-demo.html
index bd84ff2b9895..a895623f5a70 100644
--- a/src/dev-app/toolbar/toolbar-demo.html
+++ b/src/dev-app/toolbar/toolbar-demo.html
@@ -1,4 +1,8 @@