[解決済み] マテリアルのマットアイコンサイズを変更する方法

質問

この質問は、Material2 Github から来ています。 レポ .

カスタムコンポーネントでラップされたマテリアルコンポーネントのスタイル設定にまだ問題があります。

私は <logo> コンポーネントがあり、その中に <md-icon svgIcon="logo"></md-icon>

を追加する。

:host { 
   .mat-icon {
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}

カスタムコンポーネント内のマテリアルコンポーネントには適用されません。

どのように解決するのですか？

更新日：2019-05-22

新しいバージョンのMaterial Designでは、設定するオプションとして [inline]="true" を HTML 要素のプロパティとして設定するオプションがあります。

代わりにその方法を使うことをお勧めします。

<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>

これを使うと、アイコンは親コンテナから継承されます!

GLHF! :)

これについての質問を受けることがあったので、使い方の例をわかりやすくするために......。

/* 1. Add this mixin to a "global" scss */

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
  line-height: $size;
}

/* 2. Then use it like this in you component scss */

mat-icon {
  @include md-icon-size(32px);
}

使用例

<mat-icon class="myIcon" svgIcon="search"></mat-icon>

:host {
  .myIcon {
    &mat-icon {
      @include md-icon-size(32px);
    }
  }
}