角度材质：带轮廓的图标按钮

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 演示