角度2组件内部的图标不再起作用

Question

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

Answer 1

From Ionic Forum

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 {} 

Ionic Page Directives.