Angular Material アイコンサイズ変更方法
2024-10-21
Angular/Angular Materialでmat-iconのサイズを変更する方法
Angular Materialのmat-iconコンポーネントのサイズを変更するには、いくつかの方法があります。
CSSクラスを使用する
最も一般的な方法は、CSSクラスを使用することです。
<mat-icon class="my-icon">home</mat-icon>
そして、CSSファイルでクラスを定義します。
.my-icon {
font-size: 32px; /* 好きなサイズを設定 */
}
[fontSize]バインディングを使用する
テンプレート内で、[fontSize]バインディングを使用して、アイコンのサイズをデータバインドできます。
<mat-icon [fontSize]="fontSize">home</mat-icon>
そして、コンポーネントのクラスでfontSizeプロパティを定義します。
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyCompone nt {
fontSize: string = '32px';
}
mat-icon-buttonを使用する
mat-icon-buttonコンポーネントは、デフォルトでアイコンのサイズを調整します。
<mat-icon-button>
<mat-icon>home</mat-icon>
</mat-icon-button>
Angular Material アイコンサイズ変更方法のコード例
<mat-icon class="my-icon">home</mat-icon>
.my-icon {
font-size: 32px; /* 好きなサイズを設定 */
}
<mat-icon [fontSize]="fontSize">home</mat-icon>
import { Component } from '@angular/core';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyCompone nt {
fontSize: string = '32px';
}
<mat-icon-button>
<mat-icon>home</mat-icon>
</mat-icon-button>
<mat-icon-button class="my-icon-button">
<mat-icon>home</mat-icon>
</mat-icon-button>
<mat-icon-button [mat-mini]>
<mat-icon>home</mat-icon>
</mat-icon-button>
mat-iconのスタイル設定
mat-iconコンポーネントのスタイルを直接設定することもできます。
<mat-icon style="font-size: 48px;">home</mat-icon>
mat-icon-registryを使用して、アイコンを登録し、そのサイズを制御できます。
import { Component, OnInit } from '@angular/core';
import { MatIconRegistry } from '@angular/material/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.html',
styleUrls: ['./my-component.css']
})
export class MyComponent implements O nInit {
constructor(private matIconRegistry: MatIconRegistry, private domSanitizer: DomSanitizer) { }
ngOnInit() {
this.matIconRegist ry.addSvgIconSet(
'my-icon-set',
this.domSanitizer.bypassSecurityTrustResourceUrl('assets/my-icons.svg')
);
}
}
<mat-icon svgIcon="my-icon-set:home" style="font-size: 48px;"></mat-icon>
angular angular-material
