mat-icon 右填充？ Angular材料

Question

Angular 材質圖標：

我有一個墊子圖標，我想在文本旁邊。 我所做的一切都不會減少圖標和文本之間的空間。

基於此 HTML：

      <span>
        <mat-icon [inline]="true" style="display:inline;">locked</mat-icon>
        <span AMELIA SMITH</span>
      </span>

Answer 1

刪除內聯並添加自定義 css 以對齊文本，當前值不准確但您可以更改它們

在 CSS 中：

mat-icon {
  vertical-align:middle;
}

.a {
  padding-top:8px;
  vertical-align:middle;
}

或僅

mat-icon {
  vertical-align:text-bottom;
}

在 html 中：

<span>
  <mat-icon >locked</mat-icon>
  <span class="a"> AMELIA SMITH</span>
</span>