Need help upgrading to Ionic Framework 4.0? Get assistance with our Enterprise Migration Services EXPLORE NOW

Icon

ion-icon

Improve this doc

Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons, check out the Ionicons docs.

One feature of Ionicons in Ionic is when icon names are set, the actual icon which is rendered can change slightly depending on the mode the app is running from. For example, by setting the icon name of alarm, on iOS the icon will automatically apply ios-alarm, and on Material Design it will automatically apply md-alarm. This allows the developer to write the markup once while Ionic applies the appropriate icon based on the mode.

Usage

<!-- automatically uses the correct "star" icon depending on the mode -->
<ion-icon name="star"></ion-icon>

<!-- explicity set the icon for each mode -->
<ion-icon ios="ios-home" md="md-home"></ion-icon>

<!-- always use the same icon, no matter what the mode -->
<ion-icon name="ios-clock"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>

Input Properties

Attr Type Details
color string

The color to use from your Sass $colors map. Default options are: "primary", "secondary", "danger", "light", and "dark". For more information, see Theming your App.

ios string

Specifies which icon to use on ios mode.

isActive boolean

If true, the icon is styled with an "active" appearance. An active icon is filled in, and an inactive icon is the outline of the icon. The isActive property is largely used by the tabbar. Only affects ios icons.

md string

Specifies which icon to use on md mode.

mode string

The mode determines which platform styles to use. Possible values are: "ios", "md", or "wp". For more information, see Platform Styles.

name string

Specifies which icon to use. The appropriate icon will be used based on the mode. For more information, see Ionicons.

Related

Icon Component Docs

API

Native

General