[SOLVED] Ionicons not showing

Ionic Framework ionic-v3
1

Hi,
I have a small app with a tab bar with icons and a content section with icons.
The icons in the tab bar are showing, the icons in the content section aren’t.

There are no errors anywhere. Not in console, not in firebug, not in chrome dev tools.

This is how I implemented the icons in the content section:

<ion-icon name="add"></ion-icon>

It doesn’t matter, if I run ionic with ionic serve or ionic run android.
Thanks for your help.

2

can you please try once with bellow code ?

<ion-icon name="md-add"></ion-icon>

1 Like
3

I would suggest you to check if you’re using the right icon names as defined in the docs. I had the same problem because at first I googled for ionicons and ended up at the official Ionicons site (IMHO easier for browsing the icons) where the names of the icons are different than the ones used in the current Ionic 2 release, e.g. the icon for “+” is called “add” according to the docs but “plus” according to the site. Hopefully this would be fixed soon because the site also has a smarter search while in the docs you can only search by exact name.

6 Likes
4

@kuntal that didn’t work aswell.

5

@iignatov

uhh, ionic 2 is using the ionicons 3.0.0-alpha.3. the website is showing version 2.0.1.

anyhow… i fixed the problem. i needed to add IONIC_DIRECTIVES (or just Icon for only the ion-icon and icon directives) to the directives array of the @Component decorator of my component.

import {Component} from 'angular2/core';
import {IONIC_DIRECTIVES} from 'ionic-angular';

@Component({
    selector: 'my-item',
    templateUrl: 'build/components/my-item/my-item.html',
    directives: [IONIC_DIRECTIVES]
})
export class MyItemComponent {
}

the IONIC_DIRECTIVES contains all directives of the ionic framework. right now, i just need the icons, so i could also replace “IONIC_DIRECTIVES” with “Icon”.

6

@thekonz Yes, I noticed the difference in the Ionicons versions later, but at first I didn’t know about this.

About the directives - yes, the Ionic directives have to be explicitly imported when creating custom components.

However when using the Ionic components in pages these directives are already included (together with Angular’s core and form directives).

7

That works for me, thanks.

10

Thank you! this worked for me.

11

This worked for me. What does that mean?

Thanks!

12

but how to do that i am not able to use the designer pack and it is already installed in my node module. but whr=en run the code it is not visible on the screen .

13

For Ionic v4 I’m using this icons: https://ionicframework.com/docs/v3/ionicons/