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

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" 相同

标签： cssangularangular-materialgoogle-material-icons

Answer 1

多么精彩的观察。我能够体验到同样的事情......原因正是add_outline图标。我们可以在应用课程后看到::ng-deep .mat-icon{border:1px solid red; display: inherit !important; }

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

 .parentDiv{overflow-x:hidden;}

可在此处使用 stackblitz