title: Separate md-tab-header and tab body with Angular 4 Material
body: <p>I'm trying to separate the md-tab-header and the actual content body regarding Angular Material's tabs component. The reason behind this is because I want the header in a different container than the body itself, with separate styling. Here's my code so far:</p>
  
  <pre><code>&lt;div id="tabs-header-container"&gt;
          &lt;md-tab-group md-stretch-tabs="always" (selectChange)="onLinkClick($event)"&gt;
              &lt;md-tab class="uk-width-1-2"&gt;
                  &lt;ng-template md-tab-label&gt;
                      &lt;i class="fa fa-comments" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/ng-template&gt;
                  &lt;p&gt;Chat body, this should have its own container&lt;/p&gt;
              &lt;/md-tab&gt;
              &lt;md-tab class="uk-width-1-2"&gt;
                  &lt;ng-template md-tab-label&gt;
                      &lt;i class="fa fa-user-plus" aria-hidden="true"&gt;&lt;/i&gt;
                  &lt;/ng-template&gt;
                  &lt;p&gt;Referral body, this should have its own container&lt;/p&gt;
              &lt;/md-tab&gt;
            &lt;/md-tab-group&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Any help is much appreciated!</p>