Как установить отступ между значком коврика и заголовком кнопки

Question

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

Как добавить отступ между mat-icon и button title?

Я хочу сохранить заголовок кнопки в середине кнопки и оставить значок в левом углу.

Answer 1

Для этого вам нужно добавить span тег для этого под заголовком кнопки

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

Затем просто добавьте это .button-title в свой CSS-файл для стиля

.button-title{
    padding: 5px 50px 5px 50px; 
}

ThisЭто пример, который вы можете редактировать или просмотреть код Здесь на StackBlitz

Answer 2

Этого можно добиться, добавив в текст кнопки вместо значка значок.

Добавьте класс для текста кнопки в шаблоне.

<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 */
}