如何以角度增加垫子步进器的圆形图标的大小答案

【问题标题】：how to increase size of circular icon of mat stepper in angular如何以角度增加垫子步进器的圆形图标的大小
【发布时间】：2021-03-31 02:50:17
【问题描述】：

enter image description here

如何增加垫子步进圆形图标的宽度和高度。我尝试了很多使用 css 的方法，但它不起作用。

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

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

您可以使用以下方式增加圆圈的大小

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

检查我的项目： https://stackblitz.com/edit/angular-ivy-4fagek

希望对你有帮助，谢谢。

【讨论】：