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

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

<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 атрибут? (Я могу легко добавить белый класс, но я хочу это понять)

Ответы на вопрос(5)

Решение Вопроса

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

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

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);

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

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

Или же:

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

.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;
}

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

<mat-icon class="white-icon">menu</mat-icon>
 Simon_Weaver11 июн. 2018 г., 04:21
если ваш SVG имеет определенный стиль внутри, вам придется удалить их. например. стиль.a часто применяется, который будет иметь приоритет над этим. Обязательно удалитеclass='a' и не толькоa { fill: ... } атрибут
 Vik14 апр. 2018 г., 01:33
как это будет работать, если у меня есть 2 темы в styles.scss? Может ли цвет отличаться от значка в зависимости от выбранной темы во время выполнения?
 Joshua Kemmerer18 окт. 2017 г., 17:36
Это должно быть правильно, но почему это будет работать, если встроено в кнопку Материал?
 Edric19 окт. 2017 г., 14:38
Может потому что он наследует цвет? Оно используетfill: currentColor; после всего.
 Edric14 апр. 2018 г., 09:49
@Vik SCSS имеет вложенные классы
<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>
 Billa23 дек. 2017 г., 14:59
Добавить описание

добавить к вашему элементу

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

например

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

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

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

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

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

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

В 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>

нг построить

 Brother Eye22 окт. 2018 г., 11:03
это гораздо более простой способ сделать работу. Сначала я думал, что это своего рода селектор, благодаря вашему ответу я понял

Ваш ответ на вопрос