docs: improve demo of buttons

Author: json-derulo

src/app/app.component.html

@@ -356,34 +356,63 @@ <h2>Material Buttons</h2>
 
               <!--        <h3>Fab Buttons</h3>-->
               <div class="example-button-row">
-                <button mat-fab>Basic</button>
-                <button color="primary" mat-fab>Primary</button>
-                <button color="accent" mat-fab>Accent</button>
-                <button color="warn" mat-fab>Warn</button>
-                <button disabled mat-fab>Disabled</button>
-                <button
-                  aria-label="Example icon-button with a heart icon"
-                  mat-fab
-                >
+                <button color="primary" mat-fab>
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button color="accent" mat-fab>
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button color="warn" mat-fab>
                   <mat-icon>favorite</mat-icon>
                 </button>
-                <a mat-fab routerLink=".">Link</a>
+                <button disabled mat-fab>
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <a mat-fab routerLink=".">
+                  <mat-icon>link</mat-icon>
+                </a>
               </div>
 
               <!--        <h3>Mini Fab Buttons</h3>-->
               <div class="example-button-row">
-                <button mat-mini-fab>Basic</button>
-                <button color="primary" mat-mini-fab>Primary</button>
-                <button color="accent" mat-mini-fab>Accent</button>
-                <button color="warn" mat-mini-fab>Warn</button>
-                <button disabled mat-mini-fab>Disabled</button>
-                <button
-                  aria-label="Example icon-button with a heart icon"
-                  mat-mini-fab
-                >
+                <button color="primary" mat-mini-fab>
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button color="accent" mat-mini-fab>
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button color="warn" mat-mini-fab>
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button disabled mat-mini-fab>
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <a mat-mini-fab routerLink=".">
+                  <mat-icon>link</mat-icon>
+                </a>
+              </div>
+
+              <div class="example-button-row">
+                <button color="primary" mat-fab extended>
+                  Primary
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button color="accent" mat-fab extended>
+                  Accent
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button color="warn" mat-fab extended>
+                  Warn
+                  <mat-icon>favorite</mat-icon>
+                </button>
+                <button disabled mat-fab extended disabled>
+                  Disabled
                   <mat-icon>favorite</mat-icon>
                 </button>
-                <a mat-mini-fab routerLink=".">Link</a>
+                <a mat-fab extended routerLink=".">
+                  Link
+                  <mat-icon>link</mat-icon>
+                </a>
               </div>
             </mat-card-content>
           </mat-card>