From e7b697a37d930e51c46b1bd038ea0a396a6d5d44 Mon Sep 17 00:00:00 2001
From: Aaron Lewing <aaroneously@users.noreply.github.com>
Date: Wed, 31 Jan 2018 13:23:13 -0500
Subject: [PATCH] docs(tabs): tabs examples conform to Material Design
 guidelines (#8658)

Based on https://material.io/guidelines/components/tabs.html#tabs-content, tabs' labels should not be a mix of text and icons. The example has been modified to include tabs with text and tabs with icons separated into their own cards.
---
 .../tabs-template-label-example.html          | 167 +++++++++++++-----
 1 file changed, 119 insertions(+), 48 deletions(-)

diff --git a/src/material-examples/tabs-template-label/tabs-template-label-example.html b/src/material-examples/tabs-template-label/tabs-template-label-example.html
index d35bdb5ae63..26d77c7fc72 100644
--- a/src/material-examples/tabs-template-label/tabs-template-label-example.html
+++ b/src/material-examples/tabs-template-label/tabs-template-label-example.html
@@ -1,48 +1,119 @@
-<mat-tab-group class="demo-tab-group">
-  <mat-tab label="Tab 1">
-    <div class="demo-tab-content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-      orci enim rutrum enim, vel tempor sapien arcu a tellus.
-    </div>
-  </mat-tab>
-  <mat-tab label="Tab 2">
-    <ng-template mat-tab-label>
-      ⭐
-    </ng-template>
-    <div class="demo-tab-content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-      orci enim rutrum enim, vel tempor sapien arcu a tellus.
-    </div>  
-  </mat-tab>
-  <mat-tab label="Tab 3" disabled>
-    No content  
-  </mat-tab>
-  <mat-tab label="Tab 4">
-   <div class="demo-tab-content">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-      orci enim rutrum enim, vel tempor sapien arcu a tellus.
-      <br />
-      <br />
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
-      Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
-      In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
-      feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
-      orci enim rutrum enim, vel tempor sapien arcu a tellus.
-    </div>  
-  </mat-tab>
-  <mat-tab label="Tab 5">
-    No content  
-  </mat-tab>
-  <mat-tab label="Tab 6">
-    No content  
-  </mat-tab>
-</mat-tab-group>
\ No newline at end of file
+<mat-card>
+  <mat-card-content>
+    <h2 class="example-h2">Tabs with text labels</h2>
+    <mat-tab-group class="demo-tab-group">
+      <mat-tab label="Tab 1">
+        <div class="demo-tab-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+        </div>
+      </mat-tab>
+      <mat-tab label="Tab 2">
+        <div class="demo-tab-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+        </div>  
+      </mat-tab>
+      <mat-tab label="Tab 3" disabled>
+        No content  
+      </mat-tab>
+      <mat-tab label="Tab 4">
+        <div class="demo-tab-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+          <br />
+          <br />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+        </div>  
+      </mat-tab>
+      <mat-tab label="Tab 5">
+        No content  
+      </mat-tab>
+      <mat-tab label="Tab 6">
+        No content  
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>
+
+<mat-card>
+  <mat-card-content>
+    <h2 class="example-h2">Tabs with icon labels</h2>
+    <mat-tab-group class="demo-tab-group">
+      <mat-tab label="Tab 1">
+        <ng-template mat-tab-label>
+          <mat-icon>security</mat-icon>
+        </ng-template>
+        <div class="demo-tab-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+        </div>
+      </mat-tab>
+      <mat-tab label="Tab 2">
+        <ng-template mat-tab-label>
+          <mat-icon>attach_file</mat-icon>
+        </ng-template>
+        <div class="demo-tab-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+        </div>  
+      </mat-tab>
+      <mat-tab label="Tab 3" disabled>
+        <ng-template mat-tab-label>
+          <mat-icon>block</mat-icon>
+        </ng-template>
+        No content  
+      </mat-tab>
+      <mat-tab label="Tab 4">
+        <ng-template mat-tab-label>
+          <mat-icon>loop</mat-icon>
+        </ng-template>
+        <div class="demo-tab-content">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+          <br />
+          <br />
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla venenatis ante augue.
+          Phasellus volutpat neque ac dui mattis vulputate. Etiam consequat aliquam cursus.
+          In sodales pretium ultrices. Maecenas lectus est, sollicitudin consectetur felis nec,
+          feugiat ultricies mi. Aliquam erat volutpat. Nam placerat, tortor in ultrices porttitor,
+          orci enim rutrum enim, vel tempor sapien arcu a tellus.
+        </div>  
+      </mat-tab>
+      <mat-tab label="Tab 5">
+        <ng-template mat-tab-label>
+          <mat-icon>build</mat-icon>
+        </ng-template>
+        No content  
+      </mat-tab>
+      <mat-tab label="Tab 6">
+        <ng-template mat-tab-label>
+          <mat-icon>thumb_down</mat-icon>
+        </ng-template>
+        No content  
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>