angular-iconfonts

A Project For Angular To Use IconFont Intelligently.

Installation

$ npm i -S angular-iconfonts

Iconfont

Upload your icons(SVG) to your icon project you have created and download it from Iconfont, unzip download.zip and rename it to be icons folder, copy the whole icons folder to src/assets folder.

Edit Your angular.json File

Add iconfont.css and iconfont.js path to your project, the position to edit is projects/Your Project Name/architect/build/options

{
  "styles": ["src/styles.scss", "src/assets/icons/iconfont.css"],
  "scripts": ["src/assets/icons/iconfont.js"]
}

Usage

import the package to app.module.ts

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component'
import { IconFontModule } from 'angular-iconfonts'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, IconFontModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

<lib-icon-font
  name="hasSelected"
  type="icon"
  size="80"
  color="a64246"
></lib-icon-font>
<lib-icon-font
  name="notSelected"
  type="icon"
  size="80"
  color="a64246"
></lib-icon-font>
<lib-icon-font
  name="hasSelected"
  type="svg"
  size="80"
  color="a64246"
></lib-icon-font>
<lib-icon-font
  name="notSelected"
  type="svg"
  size="80"
  color="a64246"
></lib-icon-font>

A Completed Angular Demo Here