@primeicons/angular

@primeicons/angular

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

Installation

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

Usage

Import Icons in Standalone Components

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)

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

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

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:

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

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:

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.

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:

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

/* 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:

/* 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:

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:

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:

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.

License

Licensed under the PrimeUI License - Copyright (c) PrimeTek Informatics