如何在 Angular Material 11 的 MatSlideToggle 中使用图标？

Posted 2023-02-22

【中文标题】如何在 Angular Material 11 的 MatSlideToggle 中使用图标？

【英文标题】：How to use an icon inside MatSlideToggle in Angular Material 11?

【发布时间】：2021-04-24 15:42:30

【问题描述】：

在Angular Material components overview 上有一个带有图标的滑动工具示例：

这看起来真不错。不幸的是，这个例子在组件的实际文档中没有解释。

所以我尝试的是这样的：

<mat-slide-toggle labelPosition="before" color="primary">
  <mat-icon>dark_mode</mat-icon>
  Dark Mode
</mat-slide-toggle>

我将这个包裹在一个菜单中，结果如下所示：

所以它几乎就在那里，但不是真的。一切都没有正确对齐。

我的问题是：

如何正确对齐图标、标签和切换？ 如何像文档中的示例一样增加标签和切换之间的距离？

Try it on Stackblitz

【问题讨论】：

使用这个创建完整的演示 - codesandbox.io/s

@m4n0 添加了Stackblitz demo

您在寻找这样的东西吗？ nimb.ws/lUJEIu

@m4n0 是的。它几乎看起来像 Material 文档中的示例。

【参考方案1】：

您可以在app.component.css文件中修改生成的CSS：

:host ::ng-deep .mat-slide-toggle-content 
  display: flex; /* Turn into a flexbox container for alignment */


.material-icons 
  margin-right: 5px; /* Spacing from the content */


:host ::ng-deep .mat-slide-toggle-label-before .mat-slide-toggle-bar 
  margin-left: 50px; /* Spacing from the icon and content */

添加.mat-slide-toggle-content 或.mat-slide-toggle-label-before .mat-slide-toggle-bar 就足够了，但由于某种原因它无法正常工作。尽管看起来不正统，但这里的解决方案很方便：CSS style from app.component.css not getting applied to the tabs body content

您可以在此处查看完整代码：StackBlitz Demo