垫图标右填充？ Angular Material

Question

Angular Material 图标：

我有一个 垫子图标，我想放在文字旁边。不过，我做的任何事情都不会减少图标和文本之间的 space。

基于此 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>

mat-icon right padding? Angular Material