[Fixed] how to increase size of circular icon of mat stepper in angular

Issue

enter image description here

how can i increase width and height of mat stepper circular icon. i have tried many ways using css its not working.

 <mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom" >
  <mat-step [stepControl]="firstFormGroup">
<form [formGroup]="firstFormGroup">
  <ng-template matStepLabel>Fill out your name</ng-template>
  <mat-form-field>
    <mat-label>Name</mat-label>
    <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
  </mat-form-field>
  <div>
    <button mat-button matStepperNext>Next</button>
  </div>
</form>
</mat-step>
<mat-step [stepControl]="secondFormGroup">
<form [formGroup]="secondFormGroup">
  <ng-template matStepLabel>Fill out your address</ng-template>
  <mat-form-field>
    <mat-label>Address</mat-label>
    <input matInput formControlName="secondCtrl" placeholder="Ex. 1 Main St, New York, NY"
           required>
  </mat-form-field>
  <div>
    <button mat-button matStepperPrevious>Back</button>
    <button mat-button matStepperNext>Next</button>
  </div>
</form>
 </mat-step>
      <mat-step>
  <ng-template matStepLabel>Done</ng-template>
<p>You are now done.</p>
<div>
  <button mat-button matStepperPrevious>Back</button>
  <button mat-button (click)="stepper.reset()">Reset</button>
</div>

Solution

you can increase the size of the circle using the following ways

::ng-deep .mat-step-header .mat-step-icon {
  background-color: green;
  height: 50px;
  width: 50px;
  font-size: 30px;
}

check my project:
https://stackblitz.com/edit/angular-ivy-4fagek

I hope this is helpful for you, Thank you.