Angular Material의 md-icon 색상을 변경하려면 어떻게 해야 합니까?

Angular Material의 md-icon 색상을 변경하려면 어떻게 해야 합니까?

나는 내 프로젝트에서 Angular Material을 사용하기 시작했고 나는 어떻게 svg의 색상을 바꿀 수 있는지 궁금했다.am-button.

코드는 다음과 같습니다.

<md-button class="md-fab md-primary">
    <md-icon
        class="ng-scope ng-isolate-scope md-default-theme"
        style="height: 14px; width: 14px;"
        md-svg-src="img/material-icons/core/arrow-forward.svg"
    ></md-icon>
</md-button>

구글 버튼 데모처럼 svg의 색상을 검정색에서 흰색으로 변경하려면 무엇을 추가해야 합니까?(섹션 폰트 아이콘을 사용한 아이콘 버튼)

난 각질 재료 0.8에 있어 그리고 난 그냥 더했어

    style="color:white;font:bold;" 

md-icon 요소로 이동합니다.

md-icon에 색을 입히려는 분들을 위해 Angular 1.3.x와 Angular Material 0.8.x를 사용해도 같은 문제가 있음을 알게 되었습니다.

SVG 파일을 편집하고 상속된 색상을 덮어쓰는 "fill" 속성을 삭제하여 문제를 해결했습니다.

각 SVG 파일에서 이 "fill" 속성을 삭제한 후 Jason Aunkst가 지정한 CSS 덕분에 아이콘에 할당하고 싶은 색상을 적절하게 선택할 수 있었습니다.

SVG는 아래쪽에 있습니다.md-icon를 사용하여 스타일에 추가할 수 있습니다.

md-icon {
  color: red
}

md-icon svg {
  fill: inherit;
}

스타일시트로 작업을 할 수 있는 유일한 방법은 다음과 같습니다.

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}

CSS에서 사용하고 있는 것은 다음과 같습니다.

.my-icon svg
{
   fill : #fff;
}

HTML에서 다음을 수행합니다.

<ng-md-icon icon="search" class="my-icon"></ng-md-icon>

동작은 양호합니다!

아이콘 스타일에 "fill:white"를 추가하여 이 작업을 수행할 수 있습니다.

<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>

다음 내용을 css에 추가합니다.

svg {
    fill: inherit;
}

이제 svg는 md-icon의 fill 속성을 상속합니다.

<md-icon style="fill: red;" md-svg-src='/img/ic_menu_white_24px.svg'></md-icon>

디폴트 svg 아이콘 색상을 변경하려고 할 때도 같은 문제가 있었습니다.비슷한 문제를 겪고 있는 사용자는 현재 사용하고 있는 각질 재료 버전을 확인하십시오.현재 각질 재료 "0.7.1"을 사용하고 있으며, 이것은 조용히 중요합니다.

메모: 현재 Angular-material(0.7.1) 버전에서는<mdIcon></mdIcon>디렉티브는 특성만 확인합니다.postLinking 컴파일 중에 아이콘이 정의되었는지 여부기능.이 실장에서는 svg 아이콘 파일을 참조하기 위해 아이콘 Atribute를 ICON Atribute에 추가합니다.<mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon>요소 지시어.이전 버전의 각도 재료에서는 svg 파일을 참조하기 위해 md-src-svg를 사용했지만 0.7.1 버전에서는 그렇지 않습니다.

따라서 0.7.1을 사용하고 있고 위의 지침을 따르고 있다면 svg 아이콘을 올바르게 렌더링해야 합니다. 이제 사용 중인 svg의 배경색을 변경해야 합니다.

수정 전 원시 svg 파일:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
 height="24px" viewBox="0 0 24 24">
<g>
    <path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>

프로젝트 내에 모든 svg 아이콘을 저장하는 폴더가 있어야 합니다.저의 경우 모든 svg 아이콘을 저장하는 아이콘이라는 폴더가 있습니다.위의 svg 파일의 예는 https://github.com/google/material-design-icons에서 가져온 svg 아이콘입니다.(디폴트로는 검은색 svg 파일로 렌더링)

기본 svg 파일을 변경하려면 raw svg 파일에 fill 속성을 추가합니다.수정된 svg 파일 버전을 참조하십시오.

<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />

경로 요소 svg 파일 fill="green"을 추가하기만 하면 이제 svg 아이콘이 기본 검은색 대신 녹색으로 렌더링됩니다.여러분 중 일부는 다른 버전의 각질 재료를 사용하고 있다는 것을 알고 있지만, 기본 svg 색상을 변경하는 메커니즘은 동일하게 적용됩니다.이것이 당신의 문제를 해결하는 데 도움이 되기를 바랍니다, 감사합니다!

이 문제는 구글 디자인 아이콘에서 다운로드한 SVG가 svg 루트의 fill 속성을 덮어쓰기 때문에 발생하는 것으로 보입니다.Google Design에서 SVG의 뷰 소스를 예제에 사용된 뷰 소스와 비교합니다.

솔루션:css를 덮어씁니다.

md-icon svg {
    fill: currentColor;
}

커스텀 클래스 셀렉터를 설정하는 방법이 있습니다.

HTML:

<md-button class="md-fab mybtnstyle">
  <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>

CSS:

.md-button.md-fab.mybtnstyle {
  background-color: blue;
}

.md-button.md-fab.mybtnstyle:hover {
  background-color: red;
}

코드펜은 이쪽: http://codepen.io/anon/pen/pjxxgx

가장 쉬운 방법

이제 svg 또는 fill 속성을 변경할 필요가 없습니다.

간단히 됩니다.!importantCSS md-icon:

md-icon {
  color: #FFF !important;
}

같은 문제가 있었습니다만, CSS를 사용해 SVG 색상을 변경할 필요가 있었습니다만, CSS가 공급되지 않았을 때는 원래의 SVG 색상(예를 들어, fill="#fff")을 유지할 필요가 있었습니다.

Jason Aunkst의 접근 방식을 개선했습니다.해결책은 다음과 같습니다.

md-icon[style*="color:"] svg [fill] {
    fill: inherit;
}

이 클래스는 svg가 색상 값을 가진 스타일 속성을 포함하는 md-icon 요소의 자식인 한 색상 값을 상속하도록 svg의 자식 요소를 fill 속성으로 설정합니다.

단, 한 가지 채우기 색상만 사용하는 SVG에서만 작동합니다.필요에 따라 조정하십시오. 도움이 되길 바랍니다!

언급URL : https://stackoverflow.com/questions/29022756/how-do-i-change-the-color-of-an-md-icon-in-angular-material