web-dev-qa-db-ja.com

Angular Materialでアイコンの色を設定する方法は？

私はこれを持っています、私はこれを仕事と仮定しますが、そうではありません：

<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を白singcolor属性として表示するにはどうすればよいですか？ （白いクラスを簡単に追加できますが、これを理解したいです）

angularangular-materialangular-material2
33
Joshua Kemmerer

color入力は、"primary"、"accent"、または"warn"の3つの属性のみを受け入れるためです。つまり、次のいずれかです。

  1. プライマリ/アクセントのテーマを白に設定します。

    styles.scss：

    @import '~@angular/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>
57
Edric

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>

ng build

9
sfanjoy

または単に

要素に追加する

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

例えば

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

colorは別のコンポーネントなどで定義できます

8
Jimmy Kane
<mat-icon style="-webkit-text-fill-color:blue">face</mat-icon>
2
Matheus Frik

color="white"は、Angular Materialの既知の属性ではありません。

色属性は、primary、accent、およびwarnに変更できます。このように doc

ボタン内のアイコンは、その親クラスボタンがcolor:whiteのc​​ssクラスを持っているか、またはcolor="accent"が白いために機能します。開発者ツールを調べて見つけてください。

デフォルトでは、アイコンは現在のフォントの色を使用します

0
Hareesh