Angular material 使用具有弹性布局的 add_outline 按钮添加额外的 space

Question

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

或在CDN源中

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

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

<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 图标。我们可以在应用 class ::ng-deep .mat-icon{border:1px solid red; display: inherit !important; }

后看到

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

 .parentDiv{overflow-x:hidden;}

工作stackblitz available here

Angular material 使用具有弹性布局的 add_outline 按钮添加额外的 space

Angular material adds extra space using add_outline button with flex layout

css

angular-material

google-material-icons

angular