Icon inside angular 2 component no longer working

Ionic Framework ionic-v3
1

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"
    (click)="onSaveSelected()"></div>

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"
    (click)="onSaveSelected()">
    
    <ion-icon name="heart"></ion-icon>
</div>

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.

Thanks

2

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

3

Yes. I used the tutorial as an example.

4

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';

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

http://ionicframework.com/docs/v2/api/decorators/Page/

1 Like
5

Brandy! You are magical!

Thank you! It worked.

1 Like
6

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?