ply-icon is easy way to add vector icons to your project. Use name="" to add preferred icon. Base theme has Base Icon Pack of 145 carefully curated icons. As well this way gives opportunity to add custom icons to your project. Override sprite paths once with provideBaseUI({ iconPath: 'assets/icons.svg' }) in app.config.ts — see Configuration. In this tutorial you can check how to do that.
Playground
<ply-icon name="info-circle" mirror="auto" size="32">Icon</ply-icon>
Default icon example below.
<ply-icon name="home"></ply-icon>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add icon
// Paths are relative to aliases.components (default: src/app/components)
import { IconComponent } from './icon/icon.component';
@Component({
selector: 'app-icon-example',
imports: [
IconComponent
],
template: `...`
})
export class IconExampleComponent {}Install
npx ply-ui-cli add icon
Base Icon Pack is build with stroked icons. To control the color, use any color from Tailwindcss color palette classes with "stroke", for example class="stroke-slate-700".
<ply-icon name="home" class="w-6 h-6 stroke-red-500"> </ply-icon> <ply-icon name="home" class="w-6 stroke-indigo-400" ></ply-icon> <ply-icon name="home" class="w-6 stroke-fuchsia-500" ></ply-icon> <ply-icon name="home" class="w-6 stroke-amber-200" ></ply-icon> <ply-icon name="home" class="w-6 stroke-lime-300" ></ply-icon> <ply-icon name="home" class="w-6 stroke-sky-400"> </ply-icon>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add icon
// Paths are relative to aliases.components (default: src/app/components)
import { IconComponent } from './icon/icon.component';
@Component({
selector: 'app-icon-example',
imports: [
IconComponent
],
template: `...`
})
export class IconExampleComponent {}Install
npx ply-ui-cli add icon
Use Talwindcss classes width w- and height h- to control the icon size. It is mandatory to add equal values. There is no limits for preferred size
<ply-icon name="home" class="w-2 h-2 stroke-slate-700"> </ply-icon> <ply-icon name="home" class="w-4 stroke-slate-700" ></ply-icon> <ply-icon name="home" class="w-6 stroke-slate-700" ></ply-icon> <ply-icon name="home" class="w-8 stroke-slate-700" ></ply-icon> <ply-icon name="home" class="w-10 stroke-slate-700" ></ply-icon> <ply-icon name="home" class="w-12 stroke-slate-700" ></ply-icon>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-ui-cli add icon
// Paths are relative to aliases.components (default: src/app/components)
import { IconComponent } from './icon/icon.component';
@Component({
selector: 'app-icon-example',
imports: [
IconComponent
],
template: `...`
})
export class IconExampleComponent {}Install
npx ply-ui-cli add icon
Run the following command to add this component to your project:
npx ply-ui-cli add icon
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-ui-cli add icon
// Paths are relative to aliases.components (default: src/app/components)
import { IconComponent } from './icon/icon.component';
@Component({
selector: 'app-your-component',
imports: [
IconComponent
],
template: `...`
})
export class YourComponent {} API for icon — generated from JSDoc in the library source.
| API | Member | Type | Default | Description |
|---|---|---|---|---|
ply-icon | class | string | '' | Additional host CSS classes (merged via cn()). |
ply-icon | name | string | undefined | '' | — |
ply-icon | path | string | '' | Outline sprite URL. Empty uses `provideBaseUI().iconPath` (default `assets/icons.svg`). |
ply-icon | color | string | '' | — |
ply-icon | size | string | number | '' | Explicit size. Empty uses `provideBaseUI().defaultSize` unless the host already has a `w-*` / `h-*` class (those keep class-based sizing). |
ply-icon | filled | boolean | false | Renders the solid variant from `filledPath` instead of the outline sprite. |
ply-icon | filledPath | string | '' | Solid sprite URL when `filled` is true. Empty uses `provideBaseUI().filledIconPath` (default `assets/icons-filled.svg`). |
ply-icon | mirror | 'auto' | 'on' | 'off' | 'auto' | `auto` mirrors icons that point left or right when an ancestor has `dir="rtl"`. `on` always mirrors. `off` keeps the glyph pointing the same way. |
Content