CODEWITHSUNDEEP
ionic-frameworkangularionic2
prolink007
prolink007

Reputation: 34534

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"
    (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

Upvotes: 1

Views: 1071

Answers (1)

prolink007
prolink007

Reputation: 34534

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.

Upvotes: 1

Related Questions