---
title: Angular Icon Button コンポーネント – Ignite UI for Angular - MITライセンス
description: 標準のアイコンをボタン機能で向上します。今すぐお試しください。
keywords: Angular Icon Button コンポーネント, Angular Icon Button コントロール, Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, Angular UI コンポーネント
license: MIT
_language: ja
---

# Angular Icon Button (アイコン ボタン) の概要

Ignite UI for Angular Icon Button ディレクティブを任意のアイコン要素に適用して高機能なボタンを構成できます。`igxIconButton` には、flat、outlined、およびデフォルトの contained 3 つのタイプがあります。

## Angular Icon Button の例

<hr/>

## Ignite UI for Angular Icon Button を使用した作業の開始

Ignite UI for Angular Icon Button ディレクティブを初期化するには、Ignite UI for Angular をインストールする必要があります。既存の Angular アプリケーションで、以下のコマンドを入力します。

```cmd
ng add igniteui-angular
```

Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。

次の手順は、`IgxIconButtonDirective` をスタンドアロンの依存関係としてインポートすることです:

```typescript
// home.component.ts

...
// import { IgxIconButtonDirective } from '@infragistics/igniteui-angular'; for licensed package

@Component({
    selector: 'app-home',
    template: `
        <button igxIconButton="outlined">
            <igx-icon>home</igx-icon>
        </button>`,
    styleUrls: ['home.component.scss'],
    standalone: true,
    imports: [IgxIconButtonDirective]
})
export class HomeComponent {}
```

<DocsAside type="info">
このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
</DocsAside>

Ignite UI for Angular Icon Button ディレクティブをインポートしたので、要素で `igxIconButton` ディレクティブの使用を開始できます。

## Angular Icon Button のタイプ

### Flat アイコン ボタン

ディレクティブを使用して、シンプルなフラット アイコン ボタンをコンポーネント テンプレートに追加します。

```html
<button igxIconButton="flat">
    <igx-icon>edit</igx-icon>
</button>
```

### Contained アイコン ボタン

Contained アイコン ボタンを作成するには、`igxIconButton` プロパティの値を変更するだけです。タイプを選択しない場合、デフォルト値は `contained` です。

```html
<button igxIconButton>
    <igx-icon>favorite</igx-icon>
</button>
```

### Outlined アイコン ボタン

同様に、アウトライン タイプに切り替えることができます。

```html
<button igxIconButton="outlined">
    <igx-icon>more_vert</igx-icon>
</button>
```

## 例

### Disabled アイコン ボタン

アイコン ボタンを無効にしたい場合は、プロパティを使用できます。このサンプルでは、`igxIconButton` ディレクティブを使用してさまざまなファミリのアイコンを使用する方法も示します。

```html
<button igxIconButton="flat" disabled>
    <igx-icon family="fa" name="fa-home"></igx-icon>
</button>
```

### SVG アイコン

マテリアル アイコンに加えて、 `igxIconButton` ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず 依存関係を挿入し、次に メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの [SVG セクション](icon.md#svg-アイコン)を参照してください。

```typescript
constructor(private _iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icon
    this._iconService.addSvgIcon('rain', 'assets/images/card/icons/rain.svg', 'weather-icons');
}
```

```html
<button igxIconButton>
    <igx-icon family="weather-icons" name="rain"></igx-icon>
</button>
```

### Size (サイズ)

ユーザーは、`--ig-size` カスタム CSS プロパティを使用して、3 つの事前定義された `igxIconButton` サイズのいずれかを選択できます。デフォルトでは、コンポーネントのサイズは medium に設定されています。

<hr/>

上記のサンプルからわかるように、`igxIconButton` ディレクティブを使用して、`span` や `div` などの要素を Ignite UI for Angular スタイルのアイコン ボタンに変換することもできます。

## Icon Button のスタイル設定

### Icon Button テーマのプロパティ マップ

プライマリ プロパティを変更すると、関連するすべての依存プロパティが自動的に更新されます。

<div class="theme-switcher-wrapper">

 <input type="radio" name="theme" id="material" checked/>
 <label for="material" class="switch-label">Material</label>
 <input type="radio" name="theme" id="fluent"/>
 <label for="fluent" class="switch-label">Fluent</label>
 <input type="radio" name="theme" id="bootstrap"/>
 <label for="bootstrap" class="switch-label">Bootstrap</label>
 <input type="radio" name="theme" id="indigo"/>
 <label for="indigo" class="switch-label">Indigo</label>
 <div class="tables">

  <div class="theme-table material">

   <h4>Flat Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Hovered icon color |
|  | $focus-foreground | Focused icon color |
|  | $focus-hover-foreground | Focus + hover icon color |
|  | $active-foreground | Active icon color |
|  | $hover-background | Background on hover |
|  | $focus-background | Background on focus |
|  | $focus-hover-background | Background on focus + hover |
|  | $active-background | Background on active |
   <h4>Contained Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$background** | $foreground | Icon color |
|  | $hover-background | Background on hover |
|  | $focus-background | Background on focus |
|  | $focus-foreground | Focused icon color |
|  | $focus-hover-background | Background on focus + hover |
|  | $active-background | Background on active |
|  | $hover-foreground | Hovered icon color |
|  | $focus-hover-foreground | Focus + hover icon color |
|  | $active-foreground | Active icon color |
|  | $shadow-color | Shadow on focus |
|  | $focus-border-color | Focus border color |
|  | $disabled-background | Disabled background |
|  | $disabled-foreground | Disabled icon color |
   <h4>Outlined Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Hovered icon color |
|  | $focus-foreground | Focused icon color |
|  | $focus-hover-foreground | Focus + hover icon color |
|  | $active-foreground | Active icon color |
|  | $hover-background | Background on hover |
|  | $focus-background | Background on focus |
|  | $focus-hover-background | Background on focus + hover |
|  | $active-background | Background on active |
|  | $border-color | Default border color |
|  | $focus-border-color | Focus border color |

</div>
        <div class="theme-table fluent">

   <h4>Flat Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Icon color on hover |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $hover-background | Background color on hover |
|  | $focus-background | Background color on focus |
|  | $focus-hover-background | Background color on focus and hover |
|  | $active-background | Background color when active |
   <h4>Contained Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$background** | $foreground | Icon color |
|  | $hover-background | Background color on hover |
|  | $focus-background | Background color on focus |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-background | Background color on focus and hover |
|  | $active-background | Background color when active |
|  | $hover-foreground | Icon color on hover |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $shadow-color | Shadow color on focus |
|  | $focus-border-color | Border color on focus |
|  | $disabled-background | Background color when disabled |
|  | $disabled-foreground | Icon color when disabled |
   <h4>Outlined Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Icon color on hover |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $hover-background | Background color on hover |
|  | $focus-background | Background color on focus |
|  | $focus-hover-background | Background color on focus and hover |
|  | $active-background | Background color when active |
|  | $border-color | Border color |
|  | $focus-border-color | Border color on focus |

</div>
        <div class="theme-table bootstrap">

   <h4>Flat Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Icon color when hovered |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $disabled-foreground | Icon color when disabled |
|  | $shadow-color | The shadow color of the icon button |
   <h4>Contained Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$background** | $foreground | Icon color |
|  | $hover-background | Background color on hover |
|  | $focus-background | Background color on focus |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-background | Background color on focus and hover |
|  | $active-background | Background color when active |
|  | $hover-foreground | Icon color on hover |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $shadow-color | Shadow color |
|  | $focus-border-color | Border color on focus |
|  | $disabled-background | Background color when disabled |
|  | $disabled-foreground | Icon color when disabled |
   <h4>Outlined Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Icon color on hover |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $hover-background | Background color on hover |
|  | $focus-background | Background color on focus |
|  | $focus-hover-background | Background color on focus and hover |
|  | $active-background | Background color when active |
|  | $border-color | Border color |
|  | $focus-border-color | Border color on focus |
|  | $shadow-color | Shadow color |
|  | $disabled-foreground | Icon color when disabled |
|  | $disabled-border-color | The border of the icon button when disabled |

</div>
        <div class="theme-table indigo">

   <h4>Flat Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Icon color on hover |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $disabled-foreground | Icon color when disabled |
|  | $hover-background | Background color on hover |
|  | $focus-background | Background color on focus |
|  | $focus-hover-background | Background color on focus and hover |
|  | $active-background | Background color when active |
|  | $focus-border-color | Border color on focus |
   <h4>Contained Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$background** | $foreground | Icon color |
|  | $hover-background | Background color on hover |
|  | $focus-background | Background color on focus |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-background | Background color on focus and hover |
|  | $active-background | Background color when active |
|  | $hover-foreground | Icon color on hover |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $shadow-color | Shadow color |
|  | $focus-border-color | Border color on focus |
|  | $disabled-background | Background color when disabled |
|  | $disabled-foreground | Icon color when disabled |
   <h4>Outlined Icon Button</h4>
   | Primary Property | Dependent Property | Description |
| --- | --- | --- |
| **$foreground** | $hover-foreground | Icon color on hover |
|  | $focus-foreground | Icon color when focused |
|  | $focus-hover-foreground | Icon color when focused and hovered |
|  | $active-foreground | Icon color when active |
|  | $hover-background | Background color on hover |
|  | $border-color | Border color |
|  | $focus-border-color | Border color on focus |

</div>

</div>
</div>

最も簡単な方法は、CSS 変数を使用してアイコン ボタンの外観をカスタマイズする方法です。

```scss
[igxIconButton="contained"] {
  --background: #011627;
  --foreground: #fefefe;
  --hover-foreground: #011627dc;
  --hover-background: #ecaa53;
  --focus-foreground: #011627dc;
  --focus-background: #ecaa53;
  --focus-border-color: #0116276c;
  --active-foreground: #011627dc;
  --active-background: #ecaa53;
}
```

ボタンのスタイル設定に使用できるパラメーターの完全なリストについては、セクションを参照してください。

特定のタイプのアイコン ボタン (`flat`、`outlined`、`contained`) のみをスタイリングすることもできます。
そのためには、次のタイプ別テーマ関数を使用します: 、、。

以下は、`contained-icon-button-theme` 関数を使用して SCSS でカスタム テーマを定義する例です。

```scss
@use "igniteui-angular/theming" as *;

$custom-contained: contained-icon-button-theme(
    $background: #ECAA53,
);
```

これにより、ホバー、フォーカス、アクティブなどのさまざまな状態に適した前景の色と背景の色を含む、完全にテーマ設定された `contained icon button` が生成されます。

<hr/>

### Tailwind によるスタイル設定

カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。

グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:

```scss
@import "tailwindcss";
...
@use 'igniteui-theming/tailwind/utilities/material.css';
```

ユーティリティ ファイルには、`light` テーマと `dark` テーマの両方のバリエーションが含まれています。

- `light-*` クラスはライト テーマ用です。
- `dark-*` クラスはダーク テーマ用です。
- プレフィックスの後にコンポーネント名を追加します (例: `light-icon-button`、`dark-icon-button`)。

これらのクラスを適用すると、動的なテーマの計算が可能になります。そこから、`任意のプロパティ`を使用して、生成された CSS 変数をオーバーライドできます。コロンの後に、有効な CSS カラー形式 (HEX、CSS 変数、RGB など) を指定します。

プロパティの完全なリストは、で確認できます。構文は次のとおりです:

```html
<button igxIconButton class="!light-icon-button ![--icon-color:#FF4E00]">
  <igx-icon>edit</igx-icon>
</button>
```

<DocsAside type="info" title="情報">
ユーティリティ クラスが優先されるようにするには、感嘆符 (`!`) が必要です。Tailwind はスタイルをレイヤーに適用しますが、これらのスタイルを重要としてマークしないと、コンポーネントのデフォルトのテーマによってオーバーライドしてしまいます。
</DocsAside>

最終的に、icon button は次のようになります:

## API リファレンス

<hr/>

- - - ## その他のリソース

<hr/>

コミュニティに参加して新しいアイデアをご提案ください。

- [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
- [Ignite UI for Angular **GitHub** (英語)](https://github.com/IgniteUI/igniteui-angular)