# @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)