如何在没有额外间距的情况下使用 Angular Material 图标？

Question

我目前正在使用 Angular Material 图标，想知道是否有办法使用没有默认间距的图标。我注意到 Angular Material 的图标默认被一些间距包围（如图所示）。有没有一种简单的方法可以删除此间距，以便我可以将图标直接插入到我的内容中而无需额外的间距？

图标没有内边距。这就是为什么 padding:0 没有帮助。

预先感谢您的协助！

<mat-icon [matMenuTriggerFor]="menu" class="clickable">more_vert</mat-icon>

Answer 1

我们可以使用下面的CSS，我将宽度设置为硬编码为固定宽度，然后使用

display: flex; align-items: center

居中对齐图标，然后文本大小比容器大，所以我使用

overflow:hidden

作为安全性，防止父母带着孩子溢出！

  .custom-width {
    width: 10px;
    display: flex;
    justify-content: center;
    overflow: hidden;
    border: 1px solid black; /* just added to highlight the size of the box */
  }

Stackblitz 演示