Icon

Ignite UI for Angular Icon コンポーネントはアイコンおよびフォント セットを統合するため、交互の使用やマテリアル アイコンをマークアップに追加できます。コンポーネントはカスタム色をサポートします。アイコンを非アクティブに設定できます。

Icon デモ

依存関係

Icon コンポーネントが NgModule としてエクスポートされるため、アプリケーションで AppModule への IgxIconModule のインポートのみが必要になります。

// app.module.ts

import { IgxIconModule } from 'igniteui-angular';

@NgModule({
    imports: [
        ...
        IgxIconModule,
        ...
    ]
})
export class AppModule {}

使用方法

<igx-icon color="magenta">home</igx-icon>

コード例

igx-icon を使用して active ホーム アイコンをマゼンタ color に設定します。

<igx-icon color="magenta" isActive="true">home</igx-icon>

inactive アイコンを設定します。

<igx-icon [isActive]="false">volume_off</igx-icon>

CSS でアイコン サイズを設定するには、カスタム CSS を作成して名前を custom-size とします。アイコン サイズは font-size プロパティで変更でき、更に中央揃えにするには、widthheight を同じ値にします。

<igx-icon color="#0375be" class="custom-size">phone_iphone</igx-icon>
<!-- icon-sample2.component.scss -->

.custom-size{
    font-size: 56px;
    width: 56px;
    height: 56px;
}

SVG Icons

はじめに IgxIconService 依存を注入します。この例では、 IgxIconService 依存がコンポーネントのコンストラクタに注入されますが、コードで必要な場所に使用できます。

addSvgIcon メソッドを SVG ファイルをキャッシュにインポートするために使用します。SVG をキャッシュした場合、アプリケーションのどこでも使用できるようになります。アイコン名とファイル URL がメソッドに必須のパラメーターです。フォントセットも指定できます。HTML マークアップの SVG ファイルを使用できます。または addSvgIconFromText メソッドを使用して SVG ファイルをインポートして SVC テキスト コンテンツを使用できます。

  • 同じ名前のアイコンが 2 つある場合に同じフォント セット SVG アイコンが優先順位に従って表示されます。
  • SVG ファイルの画像の幅と高さは指定しないことをお勧めします。
  • 追加のポリフィル スクリプトがインターネット エクスプローラーで必要な場合があります。
// svg-icon-sample.ts

constructor(private iconService: IgxIconService) { }

public ngOnInit() {
    // register custom SVG icons
    this.iconService.addSvgIcon("contains", "/assets/images/svg/contains.svg", "filter-icons");
}
<!-- svg-icon-sample.html -->

<igx-icon name="contains" fontSet="filter-icons"></igx-icon>

Breaking Changes in 6.2.0

  • The IgxIconComponent iconName property is deprecated. To set the icon name for 'material' icons, place the name of the icon between the opening and closing tags. For 'Font Awesome' and SVG icons, use the name property.

API リファレンス

その他のリソース

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