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
# Use Font Awesome
Install
$ npm install --save font-awesome
Import the module
//...;
If you're using Angular CLI, add CSS to styles
inside the .angular-cli.json
"styles": ,
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
//...;
If you're using Angular CLI, add CSS to styles
inside the .angular-cli.json
"styles": ,
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
//...;
If you're using Angular CLI, add CSS to styles
inside the .angular-cli.json
.
"styles": ,
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>