<mat-radio-button> buttons : inner circle not centered on outer circle

In my angular 11. application, when I add buttons, the inner circle is not centered on outer circle. I tried different things in my css, it is not correcting the problem.

enter image description here

search.component.html

        <div>
          <label>Recherche par </label>
          <mat-radio-group [formControl]="floatLabelControl">
            <mat-radio-button value="rech_nom">Nom</mat-radio-button>
            <mat-radio-button value="rech_comp">Compétence clé</mat-radio-button>
            <mat-radio-button value="rech_comp_l">Compétence liée</mat-radio-button>
          </mat-radio-group>
        </div>

search.component.css

.mat-radio-button ~ .mat-radio-button {
  margin-left: 16px;
  vertical-align: middle;
  margin-top: 0;
  width:auto;
  height:auto;
  }

search.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { Observable, Subject, of } from 'rxjs';
import { FormControl, FormGroup} from '@angular/forms';
   
@Component({
    selector: 'search',
    templateUrl: './search.component.html',
    styleUrls: ['./search.component.css']
})
export class SearchComponent implements OnInit {
    floatLabelControl = new FormControl('rech_nom');