css - Angular Material 使用 add_outline 按钮和 flex 布局增加了额外的空间

Question

看起来像是库 "@angular/material" 中的错误

或者CDN源中

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

我正在尝试在 ma​​t-toolbar 内安排 div，但是当使用内部图标标记和图标 add_outline 时，我有额外的边距。只有名称为“add_outline”的图标。例如，在另一个屏幕截图中是“菜单”，并且没有错误..

<mat-toolbar-row style="display: flex; justify-content: space-between; align-items: center;">

    <button mat-icon-button (click)="sidenav.toggle()" onclick="this.blur()">
        <mat-icon>menu</mat-icon>
        </button>


        <span class="toolbar-title">{{title}}</span>


        <button mat-icon-button (click)="changeTitleButton('New')">
        <mat-icon>add_outline</mat-icon>
        </button>

    </mat-toolbar-row>
  </mat-toolbar>

当前版本: "@angular/material": "8.0.0"

但与“@angular/material”相同:“7.2.5”

Answer 1

多么精彩的观察。我能够体验到同样的事情......原因正是 add_outline 图标。我们可以在应用类 ::ng-deep .mat-icon{border:1px solid red;显示:继承!重要； }

但这是一个特殊的问题，我们可以通过父 div 的溢出属性(它包含 mat-toolbar)来解决...在我的例子中，添加了以下内容到 CSS 文件:

 .parentDiv{overflow-x:hidden;}

工作 stackblitz available here