web-dev-qa-db-ja.com

Angular Materialのmdアイコンの色を変更するにはどうすればよいですか？

私はプロジェクトでAngular Materialを使用し始めましたが、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>

Googleのボタンデモ のように、svgの色を現在の黒から白に変更するには何を追加する必要がありますか？ （セクション「フォントアイコンを使用したアイコンボタン」）

angularjsangular-material
29
maryum375

Mdアイコンに色を付けようとする人のために、Angular 1.3.xとAngular Material 0.8.x.

SVGファイルを編集して問題を修正し、継承された色を上書きしていた "fill"属性を削除しました。

各SVGファイルでこの「塗りつぶし」属性を削除した後、CSSのおかげでアイコンに割り当てる色を適切に選択できました Jason Aunkstによる指定 。

15
MeuhMeuh

私は角度材料0.8を使用していますが、単に追加しました

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

md-icon要素に。

16
thunk

sVGはng-iconの下にネストされているので、これをCSSに追加し、fill：redを追加するだけです。 ng-iconのスタイルに。

md-icon svg {
  fill: inherit;
}
12
Jason Aunkst

以下は、スタイルシートを介して動作するようになった唯一の方法です。

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

CSSでこれを使用しています：

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

そして、HTMLで：

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

正常に動作します！

4
Pramit Kundu

これをcssに追加します。

svg {
    fill: inherit;
}

Svgはmd-iconのfill属性を継承します

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

これを行うには、アイコンのスタイルに「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>
2
Mark Collins

この問題は、 Googleデザインアイコン からダウンロードされたSVGにあり、svgルートのfill属性をオーバーライドしているようです。 Google DesignのSVG のビューソースを 例で使用 と比較します。

解決策：：CSSの塗りつぶしを上書きします。

md-icon svg {
    fill: currentColor;
}
0
Pratyush

デフォルトのsvgアイコンの色を変更しようとすると、同様の問題が発生していました。同様の問題が発生している場合は、現在使用している角度材料バージョンを確認してください。現在、私は角材 "0.7.1"を使用していますが、これは静かに重要です。

注：現在のAngular-material（0.7.1）バージョンでは、<mdIcon></mdIcon>ディレクティブは、postLinking compileFunction中にattr.Iconが定義されているかどうかのみを確認します。この実装では、svgアイコンファイルを参照するために、<mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon>要素ディレクティブにicon属性を追加するだけです。以前の角度材料バージョンでは、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属性を追加します。 modified svg fileversionを参照してください：

<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カラーを変更するメカニズムは同じものを適用する必要があります。これが問題の解決に役立つことを願っています、ありがとう！

0
JayKan

私は同様の問題を抱えていました.CSSを使用してSVGカラーを変更する必要がありましたが、CSSが提供されていないときに元のSVGカラー（例えばfill = "＃fff"）を維持する必要もありました。

Jason Aunkstのアプローチを強化して機能させました。解決策は次のとおりです。

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

そのクラスは、svgが色の値を持つスタイル属性を含むmd-icon要素の子である限り、svgの子要素をfill属性で設定して色の値を継承します。

ただし、1つの塗りつぶし色のみを使用しているSVGでのみ機能します。必要に応じて調整してください。

0
Andreas V

最も簡単な方法

これで、svgまたはfillプロパティを変更する必要はありません。

CSSのmd-iconのcolorプロパティに!importantを追加するだけです

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

それを行う1つの方法は、カスタムクラスセレクターを設定することです。

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

0
bigosmallm