Angular Material中check_box_outline图标导致侧边栏水平滚动条问题求助

我之前也碰到过类似的Angular Material图标导致侧边栏滚动条的问题，大概率是check_box_outline这个图标的SVG布局特性或者Material的默认样式引发的——有些图标会因为viewBox设置、自带内边距的差异，比check_box_outline_blank、indeterminate_check_box这类同类图标多占用了一点横向空间，刚好超出sidenav的可用宽度，触发了水平滚动条。

可以试试这几个解决方向： #

• 给目标图标添加约束样式
  直接给check_box_outline图标设置固定尺寸和溢出隐藏，强制它不超出容器范围：

  .full-select-icon {
    width: 24px; /* 匹配Material图标的默认标准尺寸 */
    height: 24px;
    overflow: hidden;
    flex-shrink: 0; /* 防止flex布局下被压缩变形 */
  }
  

  然后在模板里给对应mat-icon加上这个类：

  <mat-icon class="full-select-icon" (click)="toggleAll()">check_box_outline</mat-icon>
  

• 调整mat-list-item的布局规则
  让包含全选图标的列表项自动适应容器宽度，避免内容撑破容器：

  .full-select-list-item {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
  }
  

  将这个类加到对应的mat-list-item上，确保内部元素不会横向溢出。

• 显式控制sidenav的宽度与溢出行为
  给你的mat-sidenav添加横向溢出隐藏作为兜底方案（优先解决内容溢出根源更好）：

  mat-sidenav {
    overflow-x: hidden;
    max-width: 100%;
  }
  

• 检查并升级Angular Material版本
  如果你使用的不是最新稳定版，这可能是一个已修复的小bug，升级@angular/material到最新稳定版说不定就能直接解决问题。

另外，你可以打开浏览器开发者工具，选中check_box_outline图标元素查看盒模型（margin、padding、width），对比其他正常图标的参数，能更精准定位差异点。

内容的提问来源于stack exchange，提问作者Jakub Ch.