I'm making an Ionic/cordova app and I'm trying to use the Ionic icons. I notice that when using the 'ios' namings, it works perfectly but not when using the generic or md names. In those cases, no icon is visible. I would like to have it automatically select the best icon per platform (what it should do according to the docs)
Examples for the tabs
I have this code for the first tab:
<ion-tab title="tab1" icon-off="ion-ios-list-outline" icon-on="ion-ios-list" href="#/tab/list">
(converts to <i class="icon ion-ios-list" ng-if="getIcon()" style=""></i>)
=> icon is visible
But when using the generic or material design names:
<ion-tab title="tab1" icon-off="ion-list" icon-on="ion-list" href="#/tab/list">
(converts to <i class="icon ion-list" ng-if="getIcon()"></i>
or for md <i class="icon ion-md-list" ng-if="getIcon()" style=""></i>)
=> icon is missing
Example for buttons
<button class="button button-icon ion-person-outline"></button> => no icon
<button class="button button-icon ion-ios-person-outline"></button> => works
The behaviour is the same for other icons like barcode and list.
There's an exception that works without the ios, and that's the 'plus' icon:
<button class="button button-icon ion-plus"></button> => works! '
Strange enough, according to the documentation I should use ion-add, but that also gives no icon.
Using ion-icon
Using ion-icons gives me no icon at all (when I inspect the DOM, it shows also width and height are 0)
<ion-icon name="add"></ion-icon> => no icon
<ion-icon name="plus"></ion-icon> => no icon
for reference, I'm using Visual Studio, Cordova CLI 6.2.0 and the file /css/ionic.app.css says 'Ionicons, v2.0.1'
What am I doing wrong?
Ok, my bad. I was using the Ionic 1 framework while the online documentation on the icons is for version 2. I'm migrating to v2 now.