Как установить цвет значка в угловом материале?

У меня есть это, что я бы предположил, чтобы работать, но не делает:

<mat-icon color="white">home</mat-icon>

Тогда у меня также есть:

<button mat-raised-button color="accent" type="submit"
 [disabled]="!recipientForm.form.valid">
    <mat-icon color="white">save</mat-icon>SAVE
</button>

Этот фрагмент кода по какой-то причине работает (показывает значок как белый).

Как получить одиночный mat-icon будет отображаться как белый, используя атрибут color? (Я могу просто добавить белый класс, но я хочу это понять)

Ответы

Ответ 1

Это потому, что color ввод принимает только три атрибута: "primary", "accent" или "warn". Другими словами, вы либо:

  1. Установите вашу тему как белый для основного/акцента.

    styles.scss:

    @import '[email protected]/material/theming';

@include mat-core();

$app-primary: mat-palette($mat-white);
$app-accent:  mat-palette($mat-pink);
$app-theme: mat-light-theme($app-primary, $app-accent);
@include angular-material-theme($app-theme);

  2. Используйте как ниже:

    <mat-icon color="primary">menu</mat-icon>

Или же:

  1. Просто добавьте класс для стилизации вашей иконки:

    .white-icon {
    color: white;
}
/* Note: If you're using an SVG icon, you should make the class target the '<svg>' element */
.white-icon svg {
    fill: white;
}

  2. Добавьте класс к своей иконке:

    <mat-icon class="white-icon">menu</mat-icon>

Ответ 2

В component.css или app.css добавьте стили значка цвета

.material-icons.color_green { color: #00FF00; }
.material-icons.color_white { color: #FFFFFF; }

В component.html установите класс значков

<mat-icon class="material-icons color_green">games</mat-icon>
<mat-icon class="material-icons color_white">cloud</mat-icon>

нг построить

Ответ 3

Или просто

добавить в свой элемент

[ngStyle]="{'color':, myVariableColor}"

например

<mat-icon [ngStyle]="{'color': myVariableColor}">{{ getActivityIcon() }}</mat-icon>

Где color может быть определен в другом компоненте и т.д.

Ответ 4

<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>

Ответ 5

color="white" не является известным атрибутом углового материала.

атрибут цвета может быть изменен на primary, accent и warn. как сказано в этом документе

ваш значок внутри кнопки работает, потому что его кнопка родительского класса имеет класс css color:white или может быть ваш color="accent" - белый. проверьте инструменты разработчика, чтобы найти его.

По умолчанию значки будут использовать текущий цвет шрифта

Ответ 6

Поскольку по какой-то причине белый цвет не доступен для выбора, я обнаружил, что mat-palette($mat-grey, 50) был достаточно близок к белому, по крайней мере, для моих нужд.