web-dev-qa-db-ja.com

Vanilla CSSまたはHTMLを使用してAngular Material 2 <mat-icon>でSVGサイズを変更する

Vanilla CSS、HTML、またはJSを使用して、Angular 2+ Material DesignのSVGアイコンのサイズを変更するにはどうすればよいですか？

HTML要素内でアイコンを指定すると、スタイル設定は正常に機能します。

<mat-icon style="font-size: 16px !important">home</mat-icon>

ただし、svgIcon属性を使用すると（たとえば、サードパーティのアイコンライブラリを使用する場合）、アイコンのサイズを変更できません。

<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>

SVGのスケーリングはより複雑であり、viewBox属性を使用できることを認識しています。ただし、<svg>内の<mat-icon>子要素にアクセスして、いJSハックを実行することもできません。 Vanilla CSSでそれを行う簡単な方法はありますか？またはAngularコンポーネントのいハッキングでも？

追加情報：https://materialdesignicons.com のmdi.svgアイコンライブラリを使用して、追加のアイコンを取得していますAngularプロジェクト。ただし、これらを使用するには、svgIcon属性を使用する必要があります。

angularsvgiconsangular-material2
9
Gerardo Figueroa

ライブラリスタイルがcssインライン宣言をオーバーライドしているようです。 _!important_宣言をスタイルに追加してみてください：_style="font-size: 16 !important"_またはコードを追加しなかったため、このアイコンノードを調べて、フォントサイズを定義するスタイルを確認してください。

こちら も確認してください

[〜＃〜] update [〜＃〜]：

これは別の可能性のある解決策です。サイズを変更するsvg要素にtransform: scale(2);スタイルを追加します。2は実際のサイズの200％です（もちろん、たとえば50％の0.5値を使用してサイズを小さくすることもできます）。以下は、アイコンと documnetationへのリンク を使用したWebサイトの動作サンプルです。

_.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}
_
13
mpro

あまりにも長い間これで遊んだ。

さまざまなmat-iconサイズですが、各アイコンは異なるスケールを必要とするため、他のアイコンとバランスが取れているように見えます-事実上、viewBoxのサイズを大きくします。

結局、これは十分に機能しました：

mat-icon
{
    width: 50px;
    height: 50px;

    display: flex;
    flex-shrink: 0;
    justify-content: center;

    outline: 1px dashed red;  // for testing    

    & ::ng-deep svg
    {
        align-self: center;
    }

    &.shrink-90 ::ng-deep svg
    {
        width: 90%;
        height: 90%;
    }

    &.shrink-80 ::ng-deep svg
    {
        width: 80%;
        height: 80%;
    }
}

次に、mat-iconこれで、iconCss='shrink-80'

   <mat-icon svgIcon="{{ feature.name }}" [ngClass]="feature.iconCss"></mat-icon>

mat-icon自体は、任意の追加クラスでスケーリングできます（通常のアイコンの場合と同様）。次に、「縮小」によりボックス内のサイズが調整されます。

3
Simon_Weaver

@mproソリューションを採用して、私にとってより効果的な変更をいくつか行いました（カスタムアイコンがあるので、それが理由かもしれません）。

mat-icon[size="2"]{
  width: 48px;
  height: 48px;
}

mat-icon[size="2"] svg{
  transform: scale(2);
  transform-Origin: left top;
}

またはscssソリューション：

@mixin iconSize($size){
  &[size="#{$size}"]{
    width: 24px*$size;
    height: 24px*$size;

    svg{
      transform: scale($size);
      transform-Origin: left top;
    }
  }
}
1
subarroca

これは、mat-iconの@angular/material2サイズを変更する方法です 6.0.

このメソッドでは、mat-icon-buttonを使用している場合、サイズを変更するのはSVGアイコンのみです。新しいサイズが大きすぎる場合は、mat-icon buttonのサイズを調整するだけです。単純なmat-iconであれば、これについて考える必要はありません。

.mat-icon {
   font-size: /* your size here */;
}
1
Vadamadafaka

Angular Material 2では、要素でプロパティ[inline] = "true"を使用できます。ドキュメントによると、「アイコンをインラインにするかどうか、フォントサイズに合わせてアイコンのサイズを自動的に変更します。アイコンが含まれる要素の」。したがって、マットアイコンがdiv要素内にある場合、div要素でfont-sizeスタイルを設定でき、これはmat-iconによって継承されます。

<div class="parent" style="font-size:2em"> <mat-icon>play_arrow</mat-icon> </div>
0
Abhilash

私のアプリケーションでは、Material 7を使用して、CSSの「mat-icon」要素の幅と高さを（もちろん！importantを使用して）変更しました。

例えば：

mat-icon {
    width: 32px !important;
    height: 32px !important;
}
0
TheCuBeMan