angular - Why does the text move when click in mat-tab-group

Question

Please look at my situation.

enter image description here

Here is my html

<mat-tab-group>
<mat-tab label="mat-tab-label">
  contents
</mat-tab>
<mat-tab label="mat-tab-label_0"> 
  contents
</mat-tab>

my scss

.mat-tab-label{
    display: block;
    background-color: #fff;
    display: flex;
    position: relative;
    width: 413px;
    height: 55px;}
.mat-tab-label:first-child{
    background-image: url(./img/icon01.svg);
    background-repeat: no-repeat;
    background-position: 30% 50%;
}
.mat-tab-label:last-child{
    background-image: url(./img/icon02.svg);
    background-repeat: no-repeat;
    background-position: 27% 50%;
}

The label moves every time you click. I want to fix this.

question from:https://stackoverflow.com/questions/65913695/why-does-the-text-move-when-click-in-mat-tab-group

Answer 1

Waitting for answers