check_box_outline图标占用更多空间

Question

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

所有东西都是基于mat-sidenav-container的。sidenav包含accordion --一个可展开的列表，我们可以说是“类别”。在每个扩展面板中都有一个项目选择列表。到现在为止还好。

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

除了mat-icon设置为check_box_outline的情况之外，一切似乎都运行得很好。这样的图标使得水平滚动条出现在侧边导航内。看起来在图标后面添加了一些空格，但我不明白为什么。对于其他图标，无论是check_box_outline_blank还是indeterminate_check_box，它都不会出现。

​

​

有没有人知道到底是什么导致了这个bug，以及如何防止滚动条出现？

我放置了相关代码和一个演示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>

当我在呈现的超文本标记语言中编辑check_box_outline时，滚动条会适应新的内容，即使该内容没有显示。

向styles.css添加以下CSS样式似乎可以解决这个问题(请参阅the modified stackblitz)：

.material-icons {
    overflow: hidden;
}