带有轮廓的图标按钮

Question

现在我可以添加一个按钮，比如

<button mat-stroked-button>
    <mat-icon>check_circle</mat-icon>
</button>

这样做，图标不会居中。我知道answers应用了一些类并手动调整像素的边距。这可能会影响未来的材质升级，我不想每次升级都调整它们。

阅读文档，我发现

mat-icon-button

- 没有大纲。或者

mat-mini-fab

，它具有完全不同的外观。并且不允许

mat-icon-button

和

mat-stroked-button

的组合。

我已经检查了 Material V2 和 V3 指南，但没有可用的轮廓图标按钮。

1. 这是否意味着我需要自己创建它？
2. 这个组合是有意错过的还是偶然错过的？

Answer 1

无法保证设计的代码也适用于更新的包代码。由于肯定会有一些破损，因为我不知道角度材料中的两个变量有任何自定义，所以我建议使用以下解决方案。

我认为这只是一个处理边距的小错误。下面是有问题的 CSS。

.mat-mdc-outlined-button>.mat-icon {
    margin-right: var(--mat-outlined-button-icon-spacing, 8px);
    margin-left: var(--mat-outlined-button-icon-offset, -4px);
}

使用默认值。

--mat-outlined-button-icon-spacing: 8px;
--mat-outlined-button-icon-offset: -8px;

这导致按钮不居中。他们可能已经添加了，因为带有图标的按钮通常还包含文本组件。所以文本和图标之间需要有间距。

对于您的特定情况，您有两种可能的修复方法。

全局修复它，但请注意：按钮内带有图标的文本，它们之间没有空格。解决方法是在全局级别将上述两个变量设置为零。

body {
  --mat-outlined-button-icon-spacing: 0px;
  --mat-outlined-button-icon-offset: 0px;
}

Stackblitz 演示

我认为你应该添加一个类并执行修复。

HTML：

<button mat-stroked-button class="center-align-icon-only">
  <mat-icon>check_circle</mat-icon>
</button>

TS：

.center-align-icon-only {
  --mat-outlined-button-icon-spacing: 0px;
  --mat-outlined-button-icon-offset: 0px;
}

Stackblitz 演示

Answer 2

轮廓图标按钮不是材料设计的一部分，所以是的，您需要创建一个自定义解决方案。为什么它不在 Material Design 规范中的问题纯粹是猜测，因此是基于观点的。

如果你不想弄乱边距，我认为最简单且最面向未来的解决方案是以

mat-icon-button

为基础并添加边框：

.outlined-icon-button {
  border: 1px solid rgba(0, 0, 0, 0.12);
}

Stackblitz 演示：https://stackblitz.com/edit/nkmkku?file=src%2Fexample%2Fbutton-overview-example.css

无法 100% 保证它将继续与新的 Angular Material 版本配合使用，但恕我直言，它是最强大的解决方案。

您也可以尝试将边框半径更改为 4px，但这会有点麻烦，因为波纹的边框半径也需要覆盖：

.outlined-icon-button {
  border: 1px solid rgba(0, 0, 0, 0.12);

  &,
  .mat-mdc-button-persistent-ripple {
    border-radius: 4px;
  }
}