각도 재료에서 아이콘의 색상을 설정하는 방법은 무엇입니까?

각도 재료에서 아이콘의 색상을 설정하는 방법은 무엇입니까?

저는 이것을 가지고 있습니다. 제가 작동한다고 가정하겠지만, 그렇지 않습니다.

<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속성?(화이트 클래스를 쉽게 추가할 수 있지만 이를 이해하고 싶습니다.)

그 이유는color입력은 다음 세 가지 속성만 허용합니다."primary","accent"또는"warn"따라서 CSS 방식으로 아이콘에 스타일을 지정해야 합니다.

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>
   

구성 요소.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 빌드

아니면 간단히

요소에 추가

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

예를 들어

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

어디에color다른 구성요소 등에서 정의할 수 있습니다.

color="white"Angular Material에 대한 알려진 특성이 아닙니다.

색상 속성을 다음으로 변경할 수 있습니다.primary,accent,그리고.warn본 문서에서 말한 바와 같이

당신의 아이콘 안쪽 버튼은 그것의 부모 클래스 버튼이 css 클래스를 가지고 있기 때문에 작동합니다.color:white또는 당신의 것일 수도 있습니다.color="accent"흰색입니다.개발자 도구를 확인하여 찾을 수 있습니다.

기본적으로 아이콘은 현재 글꼴 색을 사용합니다.

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

미래의 독자들을 위해, 여기 설명이 있습니다.

HTML 색상(빨강, 흰색, 녹색)을 추가할 수 없습니다.color직접 지시합니다.
기본, 강조 및 경고만 추가할 수 있습니다.

이거 뭐야?color지시는 주어진 값을 기반으로 요소에 클래스를 추가합니다.

예:

<mat-icon color="primary">home</mat-icon> <!-- this will add (.mat-primary) class -->
<mat-icon color="accent">home</mat-icon> <!-- this will add (.mat-accent) class -->
<mat-icon color="warn">home</mat-icon> <!-- this will add (.mat-warn) class -->

자, 이 클래스들은 css를 포함합니다.color소유물.

//This comes from material theming
.mat-primary {
 color: #3f51b5;
}

기본 제공 테마의 색상(매트-기본, 매트-액센트, 매트-경고)을 확인합니다.

따라서 모든 재료 구성요소에 대해 전체적으로 색상을 변경하려면 사용자 정의 팔레트를 만듭니다.

만약 당신이 단지 하나의 요소에 대해 바꾸고 싶다면, 팬조이의 대답을 따르세요.

어떤 이유로 흰색을 선택할 수 없기 때문에, 저는 다음을 발견했습니다.mat-palette($mat-grey, 50)적어도 내가 필요로 하기에는 충분히 흰색에 가까웠습니다.

동적으로 색을 설정하기 위해 사용하는 이동은 변수가 정의되지 않은 경우 기본 테마로 설정됩니다.

구성 요소에서 색상을 정의합니다.

  /**Sets the button colors - Defaults to primary them color */
  @Input('buttonsColor') _buttonsColor: string

사용자 스타일(여기에 표시됨) - 아이콘이 컨테이너의 색상을 사용하도록 강제합니다.

.mat-custom{
  .mat-icon, .mat-icon-button{
     color:inherit !important;
  }  
}

당신의 HTML 주위에 div로 당신의 버튼을 둘러쌉니다.

        <div [class.mat-custom]="!!_buttonsColor" [style.color]="_buttonsColor"> 
            <button mat-icon-button (click)="doSomething()">
                <mat-icon [svgIcon]="'refresh'" color="primary"></mat-icon>
            </button>
        </div>

언급URL : https://stackoverflow.com/questions/46812064/how-to-set-the-color-of-an-icon-in-angular-material