Icon inside angular 2 component no longer working

Updated to “ionic-framework”: “2.0.0-alpha.53” from a much earlier version. And added this dependency: “ionicons”: “3.0.0-alpha.3”.

I was using this in my html for an Angular 2 component. There is no ionic content in this html other than me trying to use the ion icons.

<div class="saveButton icon ion-md-add"

This worked in alpha 42. How do i use ionic icons in an angular 2 component? I have tried the following:

<div class="saveButton icon ion-md-add"
    <ion-icon name="heart"></ion-icon>

This just shows a blank div.

Whenever i use this line <ion-icon name="heart"></ion-icon> inside of a <ion-menu> it works fine.


Did you also updated the webpack.config.js, package.json and ionic.config.js to match the latest starter app?

Yes. I used the tutorial as an example.

If it is a custom component you need to include IONIC_DIRECTIVES in the component:

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

  selector: 'my-component'
  template: `<div class="my-style">
              <ion-icon name="heart"></ion-icon>
  directives: [IONIC_DIRECTIVES]
export class MyCustomComponent {}


1 Like

Brandy! You are magical!

Thank you! It worked.

1 Like

this solution is not working for me

this line is not imported for me

import {IONIC_DIRECTIVES} from ‘ionic/ionic’;

have other solution for this problem?