Angular Material Tab add image to button

Question

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.

My code so far (stackblitz demo)

My code part:

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
  <mat-tab label="First"  style="background:url('/assets/img/school-01.png')"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

css

.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; 
}

.ts

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 {}

stackblitz.com/edit/angular-7kpzhh?file=app/… Make use of mat-tab-label — Shantanu
– Shantanu, Commented Sep 14, 2018 at 7:04
@Shantanu Sir, it's work for me, put your answer, i can accept it — core114
– core114, Commented Sep 14, 2018 at 7:58

L. Guthardt · Accepted Answer · 2018-09-14 08:37:48Z

49

According to the Angular docs:

For more complex labels, add a template with the mat-tab-label directive inside the mat-tab.

So you can place your <img> or whatever you want into the template <ng-template mat-tab-label/>.

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            <img src="...">
            <span>foo</span>
        </ng-template>
    </mat-tab>
    <mat-tab>
        ....
    </mat-tab>
</mat-tab-group>

answered Sep 14, 2018 at 8:37

L. Guthardt

2,0766 gold badges26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

core114 Over a year ago

Sit Thanks for your answer

Collectives™ on Stack Overflow

Angular Material Tab add image to button

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related