web-dev-qa-db-ja.com

マテリアルでmd-iconサイズを変更する方法

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

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

<logo>を含む<md-icon svgIcon="logo"></md-icon>コンポーネントがあります

追加：

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

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

angularangular-material
41
Mackelito

更新：2019-05-22

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

代わりにそのアプローチを使用することをお勧めします。

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

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

GL HF！ :)

私はこれについていくつかの質問を受け取ってきたので、それを使用する方法のより明確な例を作りたかっただけです...

/* 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);
    }
  }
}
31
Mackelito

私の場合、これは完全に機能します。最新の素材を使用しています（6.2.0）

CSS：

.icon {
    font-size: 36px;
}

HTML：

  <div class="icon">
    <mat-icon [inline]="true">done</mat-icon>
  </div>

主な設定は[inline]="true"を設定することです

API から：

@Input（）inline：boolean-アイコンをインライン化するかどうか、アイコンが含まれる要素のフォントサイズに合わせてアイコンのサイズを自動的に変更します。

38
Mariusz.v7

私は使っています

<mat-icon svgIcon="cellphone-link"></mat-icon>

と

.mat-icon {
    transform: scale(2);
}

svg要素のサイズを変更します。私にとって唯一の有効なソリューションでした。2は実際のサイズの200％です（たとえば、0.5に縮小することも可能です）。

Mat-iconコンポーネントのレンダリングされたsvg要素には現時点ではviewBox属性がないため、「高さ」と「幅」の設定はオプションではありませんでした。ただし、「高さ」および「幅」のスタイル設定で動作させるには、viewBox属性が必須です。多分、Angular Materialチームがこれを改善するでしょう。

補足として：親ラッパーを使用してmat-iconを中央に配置し、

display: flex;
align-items: center;
justify-content: center;
14
Pierre Chavaroche

編集：受け入れられた答えをご覧ください！

このように使用すると問題なく動作します。

<md-icon svgIcon="arrow-down" class="size-16"></md-icon>

これをテーマcssで定義した場合（コンポーネント：ホストではない）

md-icon.size-16 {
  width: 16px;
  height: 16px;
  line-height: 16px;
}
8
Mackelito

これを試して。

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

.material-icons.mat-icon {
  @include md-icon-size(32px);
}
5
eltonplima

この問題は、viewBoxを使用せずにsvgをインライン化することによって引き起こされると考えられます。すべてのサイズ変更の試行が妨げられます。

私に代わるものは、アイコンフォントを直接使用しているようです：

<i class="material-icons" style="font-size: 40px">face</i>
3
Jorg Janke

他の可能なオプションの1つとして、最大（たとえば300px）までの任意のフォントサイズに画像を拡大縮小するオプションがある場合、次のscssループが機能します。

@for $i from 1 through 300{
  .iconsize-#{$i}{
    font-size: $i+unquote('px') !important;
    height: $i+unquote('px') !important;
    width: $i+unquote('px') !important;
  };
}

コンパイル済みのCSSで生成する最小サイズを設定する場合は、上記の1を希望する最小サイズに変更し、同様に最大値を変更するには、300を最大値に変更しますよろしくお願いします。

これは、アイコンがSVGであるため特に便利です。設定したサイズに合わせてスケーリングされます（コンテナに合わせてサードパーティのSVGアイコンをスケーリングするのに苦労しましたが、それは別の問題です）。あなたが私のような人であれば、大部分のアイコンを特定のサイズ（例：メニューアイコン）にし、一部のアイコンを大きくする必要があります（例：装飾要素）。このループを使用すると、適切なサイズが見つかるまで、さまざまなサイズのフォントを1px刻みで任意のサイズまで簡単にテストできます。

これは何をしますか？

SCSSがCSSにコンパイルされると、1〜300の関連クラスでループが出力されます。

使用方法

使用するには、.iconsize-[x]クラスをmat-iconに追加するだけです。

<mat-icon class="iconsize-45">show_chart</mat-icon>

この例では、アイコンを幅と高さ45ピクセルに設定します。

0
Scott Pritchard

私のために働いた

HTML

  <button mat-fab>
    <mat-icon class="md-36" inline aria-label="Home button">
      home
    </mat-icon>
  </button>
  <button mat-fab>
    <mat-icon class="md-48" inline aria-label="Up button">
      expand_less
    </mat-icon>
  </button>

CSS

.material-icons.md-18 {
  margin-top: -3px;
  font-size: 18px;
}
.material-icons.md-24 {
  margin-top: -3px;
  font-size: 24px;
}
.material-icons.md-36 {
  margin-top: -3px;
  font-size: 36px;
}
.material-icons.md-48 {
  margin-top: -4px;
  font-size: 48px;
}

アイコンが適切に中央に配置され、ラッパーdivがfab/buttonからオーバーフローしないエレガントすぎない

0
alexkhotkevich