如何用Angular Material创建带图标文字的按钮？解决左内边距对齐问题

Angular Material的mat-flat-button内部默认包含一个.mat-button-wrapper容器，这个容器自带默认的左右内边距，这就是导致你按钮里的图标和文字左侧出现空隙的原因——你当前的样式只覆盖了按钮本身的padding，没处理内部这个容器的样式。

把你的CSS修改成下面这样就能解决：

.mat-flat-button {
  line-height: 28px !important;
  padding: 0 12px !important;
  font-weight: 400 !important;
}

/* 移除内部容器的左内边距，让图标贴近按钮左侧 */
.mat-flat-button .mat-button-wrapper {
  padding-left: 0 !important;
}

/* 可选：给图标和文字添加合适间距，让布局更协调 */
.mat-flat-button mat-icon {
  margin-right: 8px;
}

HTML保持你原来的结构即可：

<button mat-flat-button color="primary">
  <mat-icon color="white">add</mat-icon>
  Create
</button>

如果不想依赖!important来强制覆盖样式，也可以在组件的样式文件中使用:host ::ng-deep提升选择器优先级（注意组件需允许样式穿透）：

:host ::ng-deep .mat-flat-button {
  line-height: 28px;
  padding: 0 12px;
  font-weight: 400;
}

:host ::ng-deep .mat-flat-button .mat-button-wrapper {
  padding-left: 0;
}

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