使用mat-icon作为matPrefix时，输入框占位符左侧边距过大求助

在基于Angular Material的项目中，为输入框添加前置图标时，使用mat-icon配合matPrefix指令，在outline外观下的输入框占位符左侧出现了多余的非预期边距（如图1）；但使用matSuffix添加后置图标时，显示正常（如图2）。

代码示例：

<mat-form-field fxFlex appearance="outline">
    <mat-label>Quota</mat-label>
    <mat-icon matPrefix>pin</mat-icon>
    <input matInput formControlName="quota" required fxFlex type="number">
</mat-form-field>

图1：前置图标时的占位符边距问题

图2：后置图标时的正常显示

方法1：自定义CSS修正边距 #

该问题多由Angular Material默认样式在outline模式下对前置图标的间距计算偏差导致，可通过自定义CSS调整：

在组件样式文件（如.component.scss）中添加以下代码：

// 调整outline样式下前置图标后的输入框内边距
mat-form-field[appearance="outline"] .mat-form-field-outline-start ~ .mat-form-field-infix {
    padding-left: 0.5em; // 根据实际显示效果调整数值
}

// 或直接覆盖输入框的默认内边距
mat-form-field[appearance="outline"] input.mat-input-element {
    padding-left: 0.25em;
}

若需全局生效，可将代码放入项目全局样式文件（如styles.scss）。

方法2：升级Angular Material版本 #

部分旧版本Angular Material存在该样式bug，升级至最新稳定版可解决：

# npm升级命令
npm install @angular/material@latest @angular/cdk@latest

# yarn升级命令
yarn upgrade @angular/material@latest @angular/cdk@latest

方法3：调整图标尺寸 #

图标尺寸过大可能间接导致间距异常，可先缩小图标再微调边距：

<mat-icon matPrefix size="small">pin</mat-icon>

内容的提问来源于stack exchange，提问作者nawrasg