---
title: Icon コンポーネント | MITライセンス
description: Ignite UI for Angular Icon コンポーネントを使用して、様々なアイコンおよびフォント セットを統合して交互に使用し、カスタム色を定義できます。
keywords: Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スィート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, Angular Icon コンポーネント, Angular Icon コントロール
license: MIT
_language: ja
---
# Angular Icon (アイコン) コンポーネントの概要
The Ignite UI for Angular Icon component unifies icon/font families so developers can use them interchangeably and add material icons to markup.
## Angular Icon の例
## Ignite UI for Angular Icon を使用した作業の開始
Ignite UI for Angular Icon コンポーネントを使用した作業を開始するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。
```cmd
ng add igniteui-angular
```
Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
次に、**app.module.ts** ファイルに `IgxIconModule` をインポートします。
```typescript
// app.module.ts
// import { IgxIconModule } from '@infragistics/igniteui-angular'; for licensed package
@NgModule({
imports: [
...
IgxIconModule,
...
]
})
export class AppModule {}
```
あるいは、`16.0.0` 以降、`IgxIconComponent` をスタンドアロンの依存関係としてインポートできます。
```typescript
// home.component.ts
// import { IgxIconComponent } from '@infragistics/igniteui-angular'; for licensed package
@Component({
selector: 'app-home',
template: 'home',
styleUrls: ['home.component.scss'],
standalone: true,
imports: [IgxIconComponent],
})
export class HomeComponent {
public color = '#e41c77';
}
```
Ignite UI for Angular Icon モジュールまたはコンポーネントをインポートしたので、`igx-icon` コンポーネントの使用を開始できます。
## Angular Icon の使用
### アイコンの色
`style.color` CSS プロパティを使用して、デフォルトの色を変更します。
```html
home
```
### アイコンの無効化
アイコンを無効にするには、を使用できます。
```html
volume_off
```
### コンテンツ プロジェクション
コンテンツ プロジェクションでアイコンを設定できます。
```html
bluetooth
```
### アイコンのサイズ
CSS を使用してアイコンをカスタマイズできます。アイコンのサイズを変更するには、`--size` CSS 変数を使用します。
```scss
.custom-size {
--size: 56px;
}
```
## SVG アイコン
SVG 画像はアイコンとして使用できます。はじめに 依存を注入します。この例ではコンポーネントのコンストラクタに注入されますが、コード内の必要な場所に使用できます。
メソッドを SVG ファイルをキャッシュにインポートするために使用します。SVG をキャッシュした場合、アプリケーションのどこでも使用できるようになります。アイコン名とファイル URL がメソッドに必須のパラメーターです。ファミリも指定できます。HTML マークアップの SVG ファイルを使用できます。または `addSvgIconFromText` メソッドを使用して SVG ファイルをインポートして、SVC テキスト コンテンツを使用できます。
- 同じ名前のアイコンが 2 つある場合に同じファミリ SVG アイコンが優先順位に従って表示されます。
- SVG ファイルの画像の幅と高さは指定しないことをお勧めします。
- 追加のポリフィル スクリプトがインターネット エクスプローラーで必要な場合があります。
```typescript
constructor(private iconService: IgxIconService) { }
public ngOnInit() {
// register custom SVG icons
this.iconService.addSvgIcon('contains', '/assets/images/svg/contains.svg', 'filter-icons');
}
```
```html
```
## マテリアル シンボル
さらに、ユーザーは新しく作成された[`マテリアル シンボル ライブラリ`](https://fonts.google.com/icons)に含まれる最新のマテリアル アイコンとそのデザイン バリエーションを利用できます。マテリアル シンボルの使用を開始するには、まずライブラリをアプリケーションに追加する必要があります。
```html
```
次に、依存関係を注入し、その `setFamily` メソッドを利用して、マテリアル シンボルが `igx-icon` で動作できるようにする必要があります。
```ts
constructor(private iconService: IgxIconService) { }
public ngOnInit() {
// registers a 'material-symbols-outlined' class to be applied to all igx-icons with 'material-symbols' font-family
this.iconService.setFamily('material-symbols', { className: 'material-symbols-outlined', type: 'liga' });
}
```
これで、目的のアイコンをマークアップに追加し、調整可能なフォント スタイルを使用してカスタマイズする準備が整いました。
```html
```
```scss
.custom-icon {
font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 40;
}
```
マテリアル シンボル スタイルの詳細については、[`公式ドキュメント`](https://fonts.google.com/icons)をご覧ください。
## サーバーサイド レンダリング時の注意
Angular Universal を使用してアプリケーションにサーバー側のレンダリング ロジックを実装し、`IgxIconService` を使用してアイコンを登録した場合は、以下の例外が発生することがあります。
`XMLHttpRequest is not defined. Could not fetch SVG from url.` (XMLHttpRequest が定義されていません。url から SVG をフェッチできませんでした。)>
これを避けるためには、以下の順序に従って下さい。
-
`xmlhttprequest` のインストール:
-
`server.ts` ファイル以外に追加するファイル:
```cmd
npm i xmlhttprequest
```
-
On the top of your `server.ts` file, add:
```typescript
(global as any).XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;
```
## スタイル設定
アイコンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。
```scss
@use "igniteui-angular/theming" as *;
// 重要: Ignite UI for Angular 13 より前のバージョンは、次を使用してください。
// @import '~igniteui-angular/lib/core/styles/themes/index';
```
最も簡単な方法は、を拡張し、必要に応じてアイコンをカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成する方法です。
```scss
$custom-icon-theme: icon-theme(
$color: #1481b8,
$disabled-color: #494949,
);
```
最後には、カスタム アイコン テーマをアプリケーションに渡します。
```scss
:host {
@include tokens($custom-icon-theme);
}
```
### デモ
### SVG の制限
カスタム SVG アイコンを使用する場合、は `