check_box_outline 图标占用额外空间

Question

我在使用角度和角度材料框架的组件设计时遇到了一些问题。

一切都是基于一个mat-sidenav-container. sidenav 包含手风琴 - 可扩展的列表，比方说“类别”。每个扩展面板内都有一个项目选择列表。到目前为止，一切都很好。

在选择列表上方，我添加了一个mat-list包含一项的常规项。该项目包含标题和“全选”选项。对于“全选”实用程序，我使用了相关的可点击的mat-icon.

mat-icon一切似乎都运行良好，除了设置为时的情况check_box_outline。此类图标会导致水平滚动条出现在侧面导航中。看起来图标后面添加了一些空格，但我不明白为什么。它不会出现在其他图标上，也不会check_box_outline_blank出现indeterminate_check_box。

有谁知道到底是什么导致了这个错误以及如何防止滚动条出现？

我将相关代码和演示放在stackblitz 上（在app文件夹内）。我使代码尽可能简单只是为了演示这个问题。我将不胜感激任何帮助。

Answer 1

使用 F12 工具，我看不到错误元素的宽度，但看起来mat-icon容器的溢出似乎考虑了元素的内部内容mat-sidenav：

<mat-icon _ngcontent-c0="" class="mat-icon material-icons" role="img" aria-hidden="true">
              check_box_outline
</mat-icon>

当我check_box_outline在渲染的 HTML 中进行编辑时，滚动条会适应新内容，即使该内容未显示也是如此。

将以下 CSS 样式添加到 styles.css 似乎可以解决问题（请参阅修改后的 stackblitz）：

.material-icons {
    overflow: hidden;
}