# @primeicons/angular

> PrimeIcons for Angular - 300+ customizable SVG icons as Angular components

Latest version **8.0.1** (published 2026-09-08) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads

## Install

```sh
npm install @primeicons/angular
pnpm add @primeicons/angular
yarn add @primeicons/angular
bun add @primeicons/angular
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 8.0.1 |
| Published | 2026-09-08 |
| First published | 2026-02-06 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 3 |
| Unpacked size | 2.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | PrimeTek Informatics |
| Maintainers | mert.sincan |
| Keywords | primeicons, angular, icons, svg-icons, angular-icons, icon-components |

## Links

- npm: https://www.npmjs.com/package/@primeicons/angular
- Repository: https://github.com/primefaces/primeicons-nextchapter
- Homepage: https://primeicons.dev/
- Issues: https://support.primeui.dev
- npm.io page: https://npm.io/package/@primeicons/angular

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^2
- [@primeuix/utils](https://npm.io/package/@primeuix/utils.md) ^0.8.0
- [@primeicons/core](https://npm.io/package/@primeicons/core.md) 8.0.1

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 8.0.1 (latest) — 2026-09-08
- 8.0.0 — 2026-07-15
- 8.0.0-rc.3 — 2026-07-15
- 8.0.0-rc.2 — 2026-07-08
- 8.0.0-rc.1 — 2026-06-28
- 8.0.0-beta.1 — 2026-06-25
- 8.0.0-alpha.10 — 2026-06-15
- 8.0.0-alpha.9 — 2026-05-12
- 8.0.0-alpha.8 — 2026-04-26
- 8.0.0-alpha.7 — 2026-02-20
- 8.0.0-alpha.6 — 2026-02-09
- 8.0.0-alpha.5 — 2026-02-08
- 8.0.0-alpha.4 — 2026-02-06
- 8.0.0-alpha.3 — 2026-02-06
- 8.0.0-alpha.2 — 2026-02-06
- … 1 more at https://npm.io/package/@primeicons/angular/versions

## README

# @primeicons/angular

PrimeIcons for Angular - 300+ customizable SVG icons as Angular standalone components.

## Installation

```bash
npm install @primeicons/angular
# or
pnpm add @primeicons/angular
# or
yarn add @primeicons/angular
```

## Usage

### Import Icons in Standalone Components

```typescript
import { Component } from '@angular/core';
import { Search, Home, User, Cog } from '@primeicons/angular';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [Search, Home, User, Cog],
    template: `
        <svg data-p-icon="search"></svg>
        <svg data-p-icon="home" [size]="32"></svg>
        <svg data-p-icon="user" color="blue"></svg>
        <svg data-p-icon="cog" size="2rem" color="#ff0000"></svg>
    `
})
export class AppComponent {}
```

### Import Individual Icons (Tree-Shakeable)

```typescript
import { Component } from '@angular/core';
import { Search } from '@primeicons/angular/search';
import { Home } from '@primeicons/angular/home';

@Component({
    selector: 'app-root',
    standalone: true,
    imports: [Search, Home],
    template: `
        <svg data-p-icon="search" [size]="24"></svg>
        <svg data-p-icon="home" [size]="24" color="green"></svg>
    `
})
export class AppComponent {}
```

## Inputs

All icon components accept the following inputs:

| Input   | Type               | Default        | Description                  |
| ------- | ------------------ | -------------- | ---------------------------- |
| `size`  | `number \| string` | `24`           | Icon size (width and height) |
| `color` | `string`           | `currentColor` | Icon color                   |
| `spin`  | `boolean`          | `false`        | Applies a rotation animation |

## Examples

### Basic Usage

```typescript
import { Component } from '@angular/core';
import { Heart, Star, Bell } from '@primeicons/angular';

@Component({
    selector: 'app-icons',
    standalone: true,
    imports: [Heart, Star, Bell],
    template: `
        <svg data-p-icon="heart"></svg>
        <svg data-p-icon="star" [size]="32"></svg>
        <svg data-p-icon="bell" color="red"></svg>
    `
})
export class IconsComponent {}
```

### With Signal Inputs

```typescript
import { Component, signal } from '@angular/core';
import { Search } from '@primeicons/angular';

@Component({
    selector: 'app-search',
    standalone: true,
    imports: [Search],
    template: `
        <svg data-p-icon="search" [size]="iconSize()" [color]="iconColor()"></svg>
        <button (click)="toggleSize()">Toggle Size</button>
    `
})
export class SearchComponent {
    iconSize = signal(24);
    iconColor = signal('#007bff');

    toggleSize() {
        this.iconSize.update((s) => (s === 24 ? 32 : 24));
    }
}
```

### Dynamic Icon Component

For dynamic icon rendering, you can create a wrapper component:

```typescript
import { Component, input, ViewContainerRef, effect, inject, Type } from '@angular/core';
import { CoreIcon } from '@primeicons/angular/core';
import * as Icons from '@primeicons/angular';

@Component({
    selector: 'p-icon',
    standalone: true,
    template: ''
})
export class PIcon {
    private vcr = inject(ViewContainerRef);

    name = input.required<string>();
    size = input<number | string>(24);
    color = input<string | undefined>(undefined);

    constructor() {
        effect(() => {
            this.vcr.clear();
            const IconComponent = (Icons as Record<string, Type<CoreIcon>>)[this.toPascalCase(this.name())];
            if (IconComponent) {
                const ref = this.vcr.createComponent(IconComponent);
                ref.setInput('size', this.size());
                if (this.color()) {
                    ref.setInput('color', this.color());
                }
            }
        });
    }

    private toPascalCase(str: string): string {
        return str
            .split('-')
            .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
            .join('');
    }
}
```

### With Button

```typescript
import { Component } from '@angular/core';
import { Search, Plus, Trash } from '@primeicons/angular';

@Component({
    selector: 'app-buttons',
    standalone: true,
    imports: [Search, Plus, Trash],
    template: `
        <button><svg data-p-icon="search" [size]="16"></svg> Search</button>

        <button><svg data-p-icon="plus" [size]="16"></svg> Add Item</button>

        <button class="danger"><svg data-p-icon="trash" [size]="16" color="red"></svg> Delete</button>
    `
})
export class ButtonsComponent {}
```

## TypeScript

Full TypeScript support:

```typescript
import { Component } from '@angular/core';
import { Search } from '@primeicons/angular';
import type { IconProps } from '@primeicons/core';

@Component({
    selector: 'app-typed-icon',
    standalone: true,
    imports: [Search],
    template: `<svg data-p-icon="search" [size]="config.size" [color]="config.color"></svg>`
})
export class TypedIconComponent {
    config: IconProps = {
        size: 24,
        color: 'blue'
    };
}
```

## Spin

Setting `spin` to `true` adds `p-icon-spin` to the SVG element's class list. The `p-icon-spin` class comes from PrimeUI's stylesheet.

```typescript
import { Component } from '@angular/core';
import { Spinner, Refresh, Cog } from '@primeicons/angular';

@Component({
    selector: 'app-loading',
    standalone: true,
    imports: [Spinner, Refresh, Cog],
    template: `
        <svg data-p-icon="spinner" [spin]="true"></svg>
        <svg data-p-icon="refresh" [spin]="true" [size]="24"></svg>
        <svg data-p-icon="cog" [spin]="isLoading()" color="gray"></svg>
    `
})
export class LoadingComponent {
    isLoading = signal(true);
}
```

The animation can be overridden via CSS:

```css
.p-icon-spin {
    animation: p-icon-spin 1s linear infinite;
}

@keyframes p-icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
```

## CSS Classes

Each icon automatically includes these CSS classes:

- `p-icon` - Base class for all icons
- `p-icon-{name}` - Specific class for each icon (e.g., `p-icon-search`)

```css
/* Style all icons */
:host ::ng-deep .p-icon {
    transition: color 0.2s;
}

/* Style specific icon */
:host ::ng-deep .p-icon-heart:hover {
    color: red;
}
```

Or using global styles:

```css
/* styles.css */
.p-icon {
    transition: color 0.2s;
}

.p-icon-heart:hover {
    color: red;
}
```

## Metadata & Icon Lookup

Icon metadata is managed by the `@primeicons/metadata` package and re-exported here for convenience:

```typescript
import { ICON_MAP, ICON_MAP_BY_NAME, findIcons } from '@primeicons/metadata/angular';

// Find icon by name (kebab-case)
const iconData = ICON_MAP_BY_NAME['check'];
const CheckIcon = iconData.component; // Already lazy-loaded component

// Search and use
const results = findIcons('arrow');
results.forEach((icon) => {
    const Component = icon.component;
    // Use Component in imports: imports: [Component]
});
```

Alternatively, import directly from the metadata package:

```typescript
import { ICON_MAP, findIcons } from '@primeicons/metadata/angular';
```

### Metadata API

| Variable                | Type                                | Description                                  |
| ----------------------- | ----------------------------------- | -------------------------------------------- |
| `ICON_MAP`              | `IconMetadataEntry[]`               | All icons as array                           |
| `ICON_MAP_BY_NAME`      | `Record<string, IconMetadataEntry>` | Indexed by kebab-case name                   |
| `ICON_MAP_BY_COMPONENT` | `Record<string, IconMetadataEntry>` | Indexed by component name (with Icon suffix) |
| `ICON_MAP_BY_CAMEL`     | `Record<string, IconMetadataEntry>` | Indexed by camelCase name                    |
| `TOTAL_ICONS`           | `number`                            | Total icon count                             |
| `PACKAGE_INFO`          | `object`                            | Package metadata                             |

| Function              | Returns               | Description                            |
| --------------------- | --------------------- | -------------------------------------- |
| `getIconNames()`      | `string[]`            | All kebab-case icon names              |
| `getComponentNames()` | `string[]`            | All component names (with Icon suffix) |
| `findIcons(query)`    | `IconMetadataEntry[]` | Search icons by partial match          |

### JSON Metadata

Access the raw JSON metadata directly:

```typescript
import metadata from '@primeicons/metadata/angular.json';

console.log(manifest.icons[0]); // { name: 'address-book', component: 'AddressBookIcon', ... }
```

## Icon List

The library includes 300+ icons including:

- Navigation: `ArrowLeft`, `ArrowRight`, `ChevronUp`, `ChevronDown`
- Actions: `Search`, `Plus`, `Minus`, `Check`, `Times`
- Objects: `Home`, `User`, `Cog`, `File`, `Folder`
- Social: `Facebook`, `Twitter`, `Github`, `Linkedin`
- And many more...

View the complete list at [primeicons.dev](https://primeicons.dev).

## License

Licensed under the [PrimeUI License](https://primeui.dev/licenses) - Copyright (c) [PrimeTek Informatics](https://www.primetek.com.tr)

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