Angular 2 glyphicon not showing up

Question

Trying to render a star icon on the main page, but it's not showing up (it's the only thing that should be on the page). Pretty new so I'm still learning. Please forgive the absolute stupidity of this question.

So I have created the following component called AppComponent:

import {Component} from '@angular/core';
import {Input} from '@angular/core';

@Component({
  selector: 'my-app',
  template:  `<i class="glyphicon" 
        [class.glyphicon-star]="isFavorite" 
        [class.glyphicon-star-empty]="!isFavorite"
        (click)="onClick()
        "></i>`
})

export class AppComponent  {
  @Input() isFavorite = false;

  onClick(){
    this.isFavorite = !this.isFavorite;
  }
}

I have the server running on listening mode, but it's not showing me the star on the webbrowser. Can anyone explain what I'm doing wrong.

Here is my main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

and here is my app.module.ts class:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule
  ],

  declarations: [
    AppComponent
  ],

  bootstrap: [AppComponent]
})
export class AppModule { }

Thoughts, suggestions, ideas on where I'm going wrong?

Answer 1

checkout your css define: load from cdn, load global css, ...

as i see, you using bootstrap glyphicon, if you using cdn, just add cdn link to index.html. else if you load local css, you need serve fonts directory as well. btw,

(click)="onClick()
    "

change to:

(click)="onClick()"