# ngx-icons

> A collection of icon libraries to use in your angular apps

Latest version **0.3.0** (published 2018-01-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-icons
pnpm add ngx-icons
yarn add ngx-icons
bun add ngx-icons
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2018-01-22 |
| First published | 2017-06-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Axented |
| Maintainers | rodgc |
| Keywords | angular, angular4, library, ng, fa, Font Awesome, Themify, Themify Icons, Weather Icons |

## Links

- npm: https://www.npmjs.com/package/ngx-icons
- Repository: https://github.com/axented/ngx-icons
- Homepage: https://github.com/axented/ngx-icons#readme
- Issues: https://github.com/axented/ngx-icons/issues
- npm.io page: https://npm.io/package/ngx-icons

## Alternatives

- [angular-pipes](https://npm.io/package/angular-pipes.md) — 5.6K weekly downloads
- [@ng-web-apis/midi](https://npm.io/package/@ng-web-apis/midi.md) — 2.6K weekly downloads
- [happn-3](https://npm.io/package/happn-3.md) — 1.6K weekly downloads
- [@opensip-cli/lang-go](https://npm.io/package/@opensip-cli/lang-go.md) — 1.2K weekly downloads
- [mongoose-typescript](https://npm.io/package/mongoose-typescript.md) — 85 weekly downloads

## Recent versions

- 0.3.0 (latest) — 2018-01-22
- 0.2.1 — 2017-12-14
- 0.2.0 — 2017-08-02
- 0.1.1 — 2017-06-25

## README

# ngx-icons

 A collection of icons libraries to use in your Angular apps

 ## Install

 ```shell
 $ npm install --save  ngx-icons
 ```

**Supported Libraries**

The following icon libraries are supported

* [Font Awesome](http://fontawesome.io/icons/)
* [Themify Icons](https://themify.me/themify-icons)
* [Weather Icons](https://erikflowers.github.io/weather-icons/)

 # Use Font Awesome

 **Install**

 ```shell
 $ npm install --save  font-awesome
 ```

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

**If you're using [Angular CLI](https://github.com/angular/angular-cli), add  CSS to `styles` inside the `.angular-cli.json`**
```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](http://fontawesome.io/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](https://themify.me/themify-icons) the add the ‘themify-icons.css’ file and ‘fonts’ to folder.

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

**If you're using [Angular CLI](https://github.com/angular/angular-cli), add  CSS to `styles` inside the `.angular-cli.json`**
```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](https://themify.me/themify-icons) | No


 # Use Weather Icons

 **Install**

 ```shell
 $ 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**
```typescript
//...
import { WeatherIconsModule } from 'ngx-icons';
@NgModule({
  //...
  imports: [
    //...
    WeatherIcons
  ],
  //...
})
export class AppModule { }
```

**If you're using [Angular CLI](https://github.com/angular/angular-cli), add  CSS to `styles` inside the `.angular-cli.json`.**
```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](https://erikflowers.github.io/weather-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>`

---
_Source: https://npm.io/package/ngx-icons · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._