Angular 材质使用带有 flex 布局的 add_outline 按钮添加额外空间答案

【问题标题】：Angular material adds extra space using add_outline button with flex layoutAngular 材质使用带有 flex 布局的 add_outline 按钮添加额外空间
【发布时间】：2019-05-30 19:02:18
【问题描述】：

看起来像库中的错误“@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”

【问题讨论】：

标签： css angular angular-material google-material-icons

【解决方案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

【讨论】：

感谢您的回答。我通过更改为 add 解决了它