I am facing one issue. I need to change the background color and its font color when user will select the toggle button using Angular material. I am explaining my code below.

 <div class="btn-group">
            <mat-button-toggle-group #group="matButtonToggleGroup" [value]="selectedVal" (change)="onValChange(group.value)" color="primary">
              <mat-button-toggle value="option1" style="border-right: none;width:127px">
                Option 1
              </mat-button-toggle>
              <mat-button-toggle value="option2" style="border-right: none;width:127px">
                Option 2
              </mat-button-toggle>
            </mat-button-toggle-group>
          </div>

The css code is given below.

:host .mat-button-toggle-group{
    border-radius: 20px !important;
    height: 40px !important;
    align-items: center !important;
    margin-top: 5px !important;
    padding: 0 5px !important;
    z-index: 3 !important;
    color: #017cad !important;
}
:host .mat-button-toggle-checked {
    background-color: #017cad !important;
    color: #f5f5f6;
}

As per my code the view looks like below.

When I am selecting any one button it looks like below.

If we see the above view then the some part of background is not filled with the color and also the text color I need to change to white after selection. The right view should looks like below.

I need like above image the angular material toggle button should visible. Please help me to resolve this issue.