web-dev-qa-db-ja.com

Angularマテリアルのマットアイコンのサイズを変更する方法

Angularのmat-iconタグのデフォルトサイズは常に24pxです。だからそれを変更する方法... ???

.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
javascripthtmlcssangular
12
Nguyễn Phúc

Angular Materialは 'Material Icons' Font-Familyを使用するため、アイコンのサイズはfont-sizeに依存します。

したがって、アイコンのサイズを変更する場合は、CSSファイルのfont-sizeを変更します。

例えば、

.mat-icon {
  font-size: 50px;
}
16
holydragon

font-sizeは位置を混乱させる傾向があります。私は次のようなことをします：

<mat-icon class="icon-display">home</mat-icon>

CSS：

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

2は実際には任意の数です。 2は元のサイズを2倍にします。

13
Petey

コンテナがfont-sizeに一致するように、幅と高さも変更する必要があります。

ユースケースに応じて、mat-iconの優れた機能は[インライン]のブール入力です。これをtrueに設定すると、含まれる要素のサイズが自動的に調整されます。

6
Iamamellon

「フォントサイズ」アプローチは、通常の（フォントベースの）サイズ設定でのみ機能します。したがって、svgアイコンでは機能しません。これまでのところ、実際に機能していたサイズ変更の唯一の方法は、拡大/縮小することでした。

1
Marcos Trazzini

実際の関数に一致するクラス名を作成します。覚えやすく、使いやすく、拡張しやすくなります。

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

.icon-3x {
    transform: scale(3);
}
1
brian

プロジェクト全体のmat-iconフォントサイズを変更するには、icon.cssファイルを作成し、angular.jsonに追加しました

icon.css内のコンテンツ：

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px; // Changing font-size for whole project
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  Word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

angular.jsonで、icon.cssファイルをbuildのスタイルに追加します。

...

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    ...,
    "styles": [
        {
        "input": "src/assets/app-theme.scss -- if any"
        },
        "src/styles.scss -- if any",
        "src/assets/angular-material/icon.css"

...

注：プロジェクトごとにスタイルシートを含める

0
rainversion_3