check_box_outline 图标需要额外 space

Question

我在使用 angular 和 angular-material 框架设计组件时遇到了一些问题。

一切都基于mat-sidenav-container。 sidenav 包含 accordion - 可扩展列表，比方说 "categories"。在每个扩展面板中都有一个项目选择列表。到目前为止，还不错。

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

除了 mat-icon 设置为 check_box_outline 的情况外，一切似乎都运行良好。这样的图标会导致水平滚动条出现在侧导航中。貌似在图标后面加了一些空白space，但我不明白为什么。它不会出现在其他图标上，check_box_outline_blank 和 indeterminate_check_box。

有没有人知道究竟是什么导致了这个错误以及如何防止滚动条出现？

我把相关代码和一个演示 on 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>

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

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

.material-icons {
    overflow: hidden;
}

check_box_outline 图标需要额外 space

check_box_outline icon takes additional space

google-material-icons

angular-material2

angular