chore: add span around tab label content (#9765)

* chore: add span around tab label content

This is needed for some customization cases.

* Fix flex alignment issues

Author: jelbourn

src/lib/tabs/_tabs-common.scss

@@ -28,6 +28,13 @@ $mat-tab-animation-duration: 500ms !default;
   &.mat-tab-disabled {
     cursor: default;
   }
+
+  &.mat-tab-label-content {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+  }
 }
 
 // Mixin styles for the top section of the view; contains the tab labels.

src/lib/tabs/tab-group.html

@@ -14,13 +14,16 @@
        [matRippleDisabled]="tab.disabled || disableRipple"
        (click)="_handleClick(tab, tabHeader, i)">
 
-       <!-- If there is a label template, use it. -->
-    <ng-template [ngIf]="tab.templateLabel">
-      <ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
-    </ng-template>
 
-    <!-- If there is not a label template, fall back to the text label. -->
-    <ng-template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</ng-template>
+    <div class="mat-tab-label-content">
+      <!-- If there is a label template, use it. -->
+      <ng-template [ngIf]="tab.templateLabel">
+        <ng-template [cdkPortalOutlet]="tab.templateLabel"></ng-template>
+      </ng-template>
+
+      <!-- If there is not a label template, fall back to the text label. -->
+      <ng-template [ngIf]="!tab.templateLabel">{{tab.textLabel}}</ng-template>
+    </div>
   </div>
 </mat-tab-header>