ons-icon

実例

Icons

Icons can be displayed using the <ons-icon> element. To specify the icon you also need to defined the icon attribute.

The following code will display a Material Design face icon.

<ons-icon
  icon="md-face">
</ons-icon>

Available icons

There are three kinds of icons available in Onsen UI:

The icon attribute is prefixed with fa- for Font Awesome, md- for Material Icons and ion- for Ionicons. If no prefix is provided, fa- will be added by default. In order to disable this behavior (for custom icons), you need to call ons.disableIconAutoPrefix().

Ionicons are good for iOS apps while the Material Icons work best for apps using Material Design.

Since Onsen UI renders differently based on the platform there is a special syntax to also select the icons based on platform:

<ons-icon
  icon="ion-ios-menu, material:md-menu">
</ons-icon>

This code will automatically render as a md-menu icon on Android devices and as ion-ios-menu on iOS devices.

Changing size and color

To change the size of the icon you can use the size attribute.

<ons-icon
  icon="md-face"
  size="20px">
</ons-icon>

Since the icon is a font, changing the color is as easy as changing the font size:

<ons-icon
  icon="md-face"
  style="color: red">
</ons-icon>

Rotating and spinning

To make the icon spin, the spin attribute is added.

<ons-icon
  icon="md-face"
  spin>
</ons-icon>

The icon can be rotated using the rotate attribute. The supported rotations are 90, 180 and 270 degrees.

<ons-icon
  icon="md-face"
  rotate="90">
</ons-icon>

Using with other components

Icons are often used inside other components. To add an icon to a button all you need to do is put it inside the <ons-button> element.

<ons-button>
  <ons-icon icon="md-face"></ons-icon>
  Button
</ons-button>

<ons-fab>
  <ons-icon icon="md-plus"></ons-icon>
</ons-fab>

Some components implement an icon attribute that works as a shortcut:

<ons-toolbar-button icon="md-menu"></ons-toolbar-button>
<ons-action-sheet-button icon="md-edit"></ons-action-sheet-button>

属性

[編集]

名前	型 / デフォルト値	概要
icon	String	The icon name. `"md-"` prefix for Material Icons, `"fa-"` for Font Awesome and `"ion-"` prefix for Ionicons. See all available icons on the element description (at the top). Icons can also be styled based on modifier presence. Add comma-separated icons with `"modifierName:"` prefix. The code `<ons-icon icon="ion-edit, material:md-edit"></ons-icon>` will display `"md-edit"` for Material Design and `"ion-edit"` as the default icon. `fa-` prefix is added automatically if none is provided. Check See also section for more information. （翻訳中） Optional.
size	String	The sizes of the icon. Valid values are lg, 2x, 3x, 4x, 5x, or in the size in pixels. Icons can also be styled based on modifier presence. Add comma-separated icons with `"modifierName:"` prefix. The code: `<ons-icon icon="ion-edit" size="32px, material:24px"> </ons-icon>` will render as a `24px` icon if the `"material"` modifier is present and `32px` otherwise. （翻訳中） Optional.
rotate	Number	アイコンを回転して表示します。90, 180, 270から指定できます。 Optional.
fixed-width	Boolean false	When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. （翻訳中） Optional.
spin		アイコンを回転するかどうかを指定します。 Optional.

プロパティ概要

[編集]

名前	概要
fixedWidth	When used in a list, you want the icons to have the same width so that they align vertically by defining this attribute. （翻訳中）
spin	アイコンを回転するかどうかを指定します。

お困りですか?

Onsen UIに関する質問は、Stack Overflowにてonsen-uiタグを付与してください。Onsen UIチームはあなたの問題解決をお手伝いします。

バグ報告や機能要望については、GitHub Issuesに記載をお願いいたします。

あわせて、下記の情報も参考にしてください。