Angular 输入字段中的图标重叠

我正在使用type=“text”的输入字段。我在文本框的两侧添加了图标，以增加和减少文本框内的数字。在我增加图标的大小之前，它可以正常工作。因为，图标足够大，它与给定的输入重叠

<mat-form-field >
    <mat-label>Rank</mat-label>
    <input matInput type="text" [(ngModel)]="number">
    <button mat-button matPrefix mat-icon-button>
       <mat-icon style="font-size: 40px">add_box</mat-icon>
    </button>
    <button mat-button matSuffix mat-icon-button>
       <mat-icon style="font-size: 40px">indeterminate_check_box</mat-icon>
    </button>
</mat-form-field> 

等级
添加框
不确定复选框

---

如何自定义输入字段，使其不会与给定的输入重叠？

请尝试像这样使用flex box

<mat-form-field >
    <mat-label>Rank</mat-label>
    <div style="display:flex;">
        <button mat-button matPrefix mat-icon-button>
            <mat-icon style="font-size: 40px">add_box</mat-icon>
        </button>
        <input matInput type="text" [(ngModel)]="number">
        <button mat-button matSuffix mat-icon-button>
            <mat-icon style="font-size: 40px">indeterminate_check_box</mat-icon>
        </button>
    </div>
</mat-form-field>

等级
添加框
不确定复选框

图标在堆栈中显示。我想把它们放在文本框的两侧。两个图标都在堆栈中，或者你的文本框也在堆栈中显示，而文本框内的图标都在堆栈中。不，应该在每一侧。我认为我们需要自定义输入字段，使其在图标之间移动。像这个图标文本框图标