ngx-icons v0.3.0

ngx-icons

A collection of icons libraries to use in your Angular apps

Install

$ npm install --save  ngx-icons

Supported Libraries

The following icon libraries are supported

• Font Awesome
• Themify Icons

• Weather Icons

  Use Font Awesome

  Install

  $ npm install --save  font-awesome

Import the module

//...
import { FontAwesomeModule } from 'ngx-icons';
@NgModule({
  //...
  imports: [
    //...
    FontAwesomeModule
  ],
  //...
})
export class AppModule { }

If you're using Angular CLI, add CSS to styles inside the .angular-cli.json

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

Usage and Options

To use the component use selector: <fa></fa>.

Use Themify Icons

Install

Download icons from Themify the add the ‘themify-icons.css’ file and ‘fonts’ to folder.

Import the module

//...
import { ThemifyIcons } from 'ngx-icons';
@NgModule({
  //...
  imports: [
    //...
    ThemifyIcons
  ],
  //...
})
export class AppModule { }

If you're using Angular CLI, add CSS to styles inside the .angular-cli.json

"styles": [
    "styles.css",
    "../path/to/themify-icons.css"
],

Usage and Options

To use the component use selector: <ti></ti>.

Use Weather Icons

Install

$ npm install --save  git+https://github.com/erikflowers/weather-icons.git

Note that npm install --save weather-icons installs legacy version 1.5

Import the module

//...
import { WeatherIconsModule } from 'ngx-icons';
@NgModule({
  //...
  imports: [
    //...
    WeatherIcons
  ],
  //...
})
export class AppModule { }

If you're using Angular CLI, add CSS to styles inside the .angular-cli.json.

"styles": [
    "styles.css",
    "../node_modules/weather-icons/css/weather-icons.css",
    "../node_modules/weather-icons/css/weather-icons-wind.css"
],

Note that if you do not require the wind direction icons you can drop weather-icons-wind.css.

Usage and Options

To use the component use selector: <wi></wi>.

Examples:

• <wi name="wind" direction="from" degree="78"></wi>
• <wi name="sleet" fixed="true"></wi>
• <wi name="time" time="7"></wi>
• <wi name="raindrop" flip="vertical"></wi>
• <wi name="fire" rotate="90"></wi>