Angular动态设置MatIcon的iconPositionEnd属性绑定问题

问题核心 #

iconPositionEnd是MatButton组件的输入属性，而非MatIcon的属性。静态写法生效是因为Angular会将MatIcon上未识别的静态属性自动提升到宿主按钮元素，但动态绑定会严格查找当前元素的属性，因此报错。

正确解决方案 #

方案1：直接绑定到按钮元素 #

将动态绑定写在<button>上，而非<mat-icon>：

<button mat-stroked-button class="button button-draft" [iconPositionEnd]="customIconPos">
  <mat-icon>{{ icon }}</mat-icon>
  {{ btnText }}
</button>

MatButton会根据iconPositionEnd的布尔值自动调整按钮内图标的位置，无需在MatIcon上做任何设置。

方案2：条件添加属性（可选） #

如果需要在customIconPos为true时才添加iconPositionEnd属性，可使用属性绑定语法：

<button mat-stroked-button class="button button-draft" [attr.iconPositionEnd]="customIconPos ? '' : null">
  <mat-icon>{{ icon }}</mat-icon>
  {{ btnText }}
</button>

当customIconPos为false时，设置为null会移除该属性，MatButton会默认使用图标在左侧的布局。

为什么之前的方法无效 #

• 动态绑定[iconPositionEnd]到MatIcon：Angular会在MatIcon组件中查找该属性，而MatIcon并没有这个输入属性，因此报错。
• [attr.iconPositionEnd]绑定到MatIcon：虽然会在MatIcon元素上添加该属性，但MatButton只会读取自身元素上的iconPositionEnd属性，因此无法生效。

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