Icon Component — Vuetify.js

Icon

v-iconコンポーネントは、あなたのアプリケーションの様々な場面に応じて多くのアイコンを提供します。Vuetifyのアイコンは、GoogleのMaterial Iconsライブラリを使用します。全ての利用可能なアイコンのリストは、公式のMaterial Iconsページをご覧ください。

Usage

Icons come in two themes (light and dark), and four different sizes (standard, medium, large, and x-large). If you want to use SVG icons with VIcon component, read about using SVG icons with VIcon here.

API

props

slots

Name

color

Default

undefined

Type

string

コンポーネントに色を設定します。この色は、定義されている色の名前（例えばsuccessやpurple）や、CSSの色指定（#033やrgba(255, 0, 0, 0.5)）を設定できます。

Name

dark

Default

false

Type

boolean

ダークテーマを適用します。

Name

disabled

Default

false

Type

boolean

Mixins.Input.props.disabled

Name

large

Default

false

Type

boolean

アイコンのサイズを大 (36px) にします。

Name

left

Default

false

Type

boolean

ボタン内部でアイコンを使用する場合に、アイコンを左に配置します。

Name

light

Default

false

Type

boolean

ライトテーマを適用します。

Name

medium

Default

false

Type

boolean

アイコンのサイズを中 (28px) にします。

Name

right

Default

false

Type

boolean

ボタン内部でアイコンを使用する場合に、アイコンを右に配置します。

Name

size

Default

undefined

Type

number | string

Components.Icons.

Name

small

Default

false

Type

boolean

アイコンのサイズを小 (16px) にします。

Name

x-large

Default

false

Type

boolean

アイコンのサイズを最大 (40px) にします。

Examples

Font Awesome

Font Awesome のアイコンの利用をサポートしています。アイコン名にfa-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにFont Awesomeを導入しておく必要があるので注意して下さい。

Material Design Icons

Material Design Iconsのアイコンの利用をサポートしています。アイコン名にmdi-プレフィックスを付与するだけで使用できます。あなたのプロジェクトにMaterial Design Iconsを導入しておく必要があるので注意して下さい。

色

カラーヘルパーを使用すると、アイコンの色を標準のdark、lightテーマから変更できます。

ボタン

アイコンをボタン内部で使用し、ボタンを強調させるための動きを付けることができます。

Clickable

Binding any click event to v-icon will automatically change the cursor to a pointer.

Up Next

Edit this page | language on Github

— Contribution Guide