ionic tutorial - Extended usage in Ionicframework - ionic framework - ionic 2 - ionic creator - ionic development
Ionic has some CSS components where you can use Ionicons as a default which have preset styling. The range class in the item <div> will apply correct styling to both the input and the icons inside it.
Example
<div class="item range">
<i class="icon ion-volume-low"></i>
<input type="range" name="volume">
<i class="icon ion-volume-high"></i>
</div>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
Another example of Ionicon usage in Ionic tabs which will create a tab like menu. The tabs-striped tabs-color-assertive classes define the style of the tabs themselves. Icons are used with simple <i> tags and they get their positional styling from the classes applied to the parent divs.
<div class="tabs-striped tabs-color-assertive">
<div class="tabs">
<a class="tab-item" href="#">
<i class="icon ion-home"></i>
Home
</a>
<a class="tab-item" href="#">
<i class="icon ion-gear-b"></i>
Settings
</a>
</div>