如何设置 mat-icon 和按钮标题之间的填充

Question

<button mat-raised-button color="warn">
     <mat-icon>delete</mat-icon>
     Remove Driver
</button>

如何在标题mat-icon和button标题之间添加填充？

我想将按钮标题保留在按钮的中间，并将图标保留在左上角。

Answer 1

您可以通过向按钮文本而不是图标添加填充来实现此目的。

在模板中为按钮文本添加一个类。

<button mat-raised-button color="warn">
    <mat-icon>delete</mat-icon>
    <span class="button-text">Remove Driver</span>
</button>

button-text然后在CSS中定义。

.button-text {
    padding-left: 50px;
    padding-right: 74px; /* Add 24px to align the text in the center since the icon's width is 24px */
}