角形材料具有柔性布局的额外空间

Question

看起来像库中的错误“ @ angular / material”

或在CDN源中

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

我正在尝试在 mat-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; display: inherit !important; }

之后可以看到

但这是一个特殊的问题，我们可以通过其父div（容纳mat-toolbar）上的溢出属性来解决...在我的情况下，添加到 CSS 文件之后：

 .parentDiv{overflow-x:hidden;}

工作stackblitz available here