title: Angular Material Tab add image to button
body: <p>I'm beginner for the Angular. I try to do something with Angular material tab . I added the tab section to image but that part is not working. Does anyone know how to add a image to the angular material tab. Please have a look at my attached image to understand what I try to achieve. </p>
  
  <p><a href="https://i.stack.imgur.com/hk6yx.png" rel="noreferrer"><img src="https://i.stack.imgur.com/hk6yx.png" alt="Need like this"></a></p>
  
  <p><a href="https://stackblitz.com/edit/angular-btsem1-qzh6mh" rel="noreferrer">My code so far (stackblitz demo)</a></p>
  
  <p>My code part:</p>
  
  <pre><code>&lt;mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4"&gt;
    &lt;mat-tab label="First"  style="background:url('/assets/img/school-01.png')"&gt; Content 1 &lt;/mat-tab&gt;
    &lt;mat-tab label="Second"&gt; Content 2 &lt;/mat-tab&gt;
    &lt;mat-tab label="Third"&gt; Content 3 &lt;/mat-tab&gt;
  &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.example-stretched-tabs {
    max-width: 800px;
  }
  /* active tab */
  .mat-tab-list .mat-tab-labels .mat-tab-label-active {
    color:#0f2241;
    background-color: #535353;
    opacity: 1;
  }
  
  /* ink bar */
  .mat-tab-group.mat-primary .mat-ink-bar {
    background: none;
    content: url('https://image.flaticon.com/icons/svg/60/60995.svg');
    height: 10px; 
  }
  </code></pre>
  
  <p><strong>.ts</strong></p>
  
  <pre><code>import {Component, ViewEncapsulation} from '@angular/core';
  
  /**
   * @title Tab group with stretched labels
   */
  @Component({
    selector: 'tab-group-stretched-example',
    templateUrl: 'tab-group-stretched-example.html',
    styleUrls: ['tab-group-stretched-example.css'],
    encapsulation: ViewEncapsulation.None
  })
  export class TabGroupStretchedExample {}
  </code></pre>