Spruce up the basic toolbar example

Author: livvielin

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",
     ],

src/components-examples/material/toolbar/index.ts

@@ -1,4 +1,5 @@
 import {NgModule} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {ToolbarMultirowExample} from './toolbar-multirow/toolbar-multirow-example';
@@ -16,6 +17,7 @@ const EXAMPLES = [
 
 @NgModule({
   imports: [
+    MatButtonModule,
     MatIconModule,
     MatToolbarModule,
   ],

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;
+}

src/components-examples/material/toolbar/toolbar-overview/toolbar-overview-example.html

@@ -1 +1,13 @@
-<mat-toolbar>My App</mat-toolbar>
+<mat-toolbar>
+	<button mat-icon-button class="example-icon" aria-label="Example icon-button with menu icon">
+		<mat-icon>menu</mat-icon>
+	</button>
+	<span>My App</span>
+	<span class="example-spacer"></span>
+	<button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon">
+		<mat-icon>favorite</mat-icon>
+	</button>
+	<button mat-icon-button class="example-icon" aria-label="Example icon-button with share icon">
+	    <mat-icon>share</mat-icon>
+	</button>
+</mat-toolbar>