ionic tutorial - ionic icons - ionic - ionic development - ionic 2 - ionic framework
Icons:
- Icons can be used on their own or inside a number of Ionic components.
- 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 battery-full, on iOS the icon will automatically apply ios-battery-full, and on Material Design it will automatically apply md-battery-full.
- This allows the developer to write the markup once while Ionic applies the appropriate icon based on the mode.
- There are more than 700 premium icons provided by Ionic. There are also different sets of icons provided for Android and IOS.
- You can use your own custom icons or any other icon set instead.
Usage:
<?php
Route::get('/', function () {
return view('welcome');
});
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
<!-- explicity set the icon for each mode -->
<ion-icon ios="ios-home" md="md-home"></ion-icon>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
<!-- always use the same icon, no matter what the mode -->
<ion-icon name="ios-clock"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Input Properties:
| Attr | Type | Details |
|---|---|---|
| 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. |
| name | string | Specifies which icon to use. The appropriate icon will be used based on the mode. For more information, see Ionicons. |
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
How to use Icons?
- When you are adding Ionic elements you always add main class first, and then you add subclass you want.
- The main class for all icons is icon. Sub class is name of the icon you want. We will add six icons in our example:
<i class = "icon icon ion-happy-outline"></i>
<i class = "icon icon ion-star"></i>
<i class = "icon icon ion-compass"></i>
<i class = "icon icon ion-planet"></i>
<i class = "icon icon ion-ios-analytics"></i>
<i class = "icon icon ion-ios-eye"></i>
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Above code will produce following screen:
ionic tutorial . extension , ionic framework , ionic , ionic framework book , ionic app example , ionic templates , ionic getting started
Icon-size:
- The size of icons can be changed with font-size property in your Ionic CSS file.
.icon {
font-size: 50px;
}
Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
- Once you setup icon size, same code will produce following screen.
