ngx-icons

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>.

Name	Type	Options	Optional
name	String	F-A Icons	No
size	String	lg, 2x, 3x, 4x, 5x	Yes
fixed	Boolean	true / false	Yes
animation	String	spin / pulse	Yes
rotate	Number / String	90 / 180 / 270 / horizontal / vertical	Yes
inverse	Boolean	true / false	Yes
qoute	String	left / right	Yes
pull	String	left / right	Yes

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>.

Name	Type	Options	Optional
name	String	Themnify Icons	No

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>.

Name	Type	Options	Optional
name	String	W-I Icons	No
fixed	Boolean	true / false	Yes
rotate	Number	90 / 180 / 270	Yes
flip	String	horizontal / vertical	Yes
direction	String	towards / from	Yes, only for wind default towards
degree	Number	0-360	Yes, only for wind default 0
cardinal	String	n - nnw	Yes, only for wind default n
beaufort	Number	0-11	Yes, only for wind-beaufort default 0
time	Number	1-12	Yes, only for time default 1

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>