ng-phosphor

A community Angular library for Phosphor Icons. Standalone components, signal inputs, six icon weights, and SVGs that inherit your application colors.

This project is independently maintained. It is not an official Phosphor project or an Angular project. The icon artwork belongs to the Phosphor contributors and retains its original MIT license.

Status

Version 0.1.0 is prepared for its first public npm release. The package is not published yet. The package name is @wtiger001/ng-phosphor. The installation command below applies after publication.

npm install @wtiger001/ng-phosphor

Requires Angular 22. Older Angular versions are not supported by this initial implementation.

Quick start

Import the standalone component and the icons your component uses.

import { Component } from '@angular/core'
import {
  PhosphorIconComponent,
  PhMagnifyingGlass,
  PhStackPlus,
} from '@wtiger001/ng-phosphor'

@Component({
  selector: 'app-toolbar',
  standalone: true,
  imports: [PhosphorIconComponent],
  template: `
    <button type="button">
      <ph-icon [icon]="search" weight="light" /> Search
    </button>
    <button type="button" aria-label="Add layers">
      <ph-icon [icon]="layers" weight="duotone" [size]="24" />
    </button>
  `,
})
export class ToolbarComponent {
  readonly search = PhMagnifyingGlass
  readonly layers = PhStackPlus
}

There is no global registration step, DOM scanning, runtime icon fetch, or icon font. Every icon is a typed constant. Names are prefixed with Ph, such as PhHeart and PhX. SVG paths render through Angular bindings without HTML injection or sanitizer bypasses.

Component API

| Input | Type | Default | Purpose | |---|---|---|---| | icon | PhosphorIcon | Required | Imported icon definition | | weight | PhosphorWeight | regular | thin, light, regular, bold, fill, or duotone | | size | number \| string | 1em | Numbers use pixels; strings accept CSS sizes | | color | string \| null | null | Inherit text color or set a CSS color | | label | string \| null | null | Accessible label for a meaningful standalone icon | | fixedWidth | boolean | false | Reserve 1.25em for aligned rows | | spin | boolean | false | Continuous rotation; respects reduced motion |

<ph-icon [icon]="heart" weight="light" [size]="32" color="tomato" />
<ph-icon [icon]="spinner" [spin]="true" />
<ph-icon [icon]="globe" [fixedWidth]="true" label="Worldwide coverage" />

Each imported icon includes all six weights, so its weight can change at runtime. Modern production bundlers can remove unused icon exports. Import individual icons rather than constructing a registry of every exported icon. All weights of a used icon remain in the bundle; this version does not provide individual-weight imports.

Duotone colors

The foreground uses currentColor. The background supports these CSS properties:

| Property | Default | |---|---| | --ph-duotone-color | currentColor | | --ph-duotone-opacity | Phosphor's source opacity, normally 0.2 |

<ph-icon
  [icon]="heart"
  weight="duotone"
  color="#006666"
  style="--ph-duotone-color: #f58220; --ph-duotone-opacity: .35"
/>

Accessibility

Icons are decorative by default and hidden from assistive technology. Give an icon-only button its own accessible name. Use label when the icon itself conveys meaning outside a labelled control. The SVG is not keyboard-focusable. Rotation stops when the user requests reduced motion.

Use in another Angular library

A consuming Angular library can import PhosphorIconComponent exactly as an application does. Declare @wtiger001/ng-phosphor as a peer dependency and install it as a development dependency for the library build. The final application installs both libraries. This project has no dependency on Mapag or MarketMaker.

Local development

Use Node 24.15.0, as specified in .nvmrc.

npm ci
npm run check:icons
npm test
npm run build
npm run build:demo

The demo lists all 1,512 icons alphabetically, with name/import search, six weight choices, and preview sizes from 24 to 64 pixels. The complete catalog loads as a separate demo bundle. Consumer applications still import only the icons they need.

Start the demo explicitly when you want it:

npm start

Build a local package for testing in another project:

npm run pack:lib

Install the resulting wtiger001-ng-phosphor-0.1.0.tgz from the consumer project with npm install /absolute/path/to/the/package.tgz.

Icon source and generation

The project pins @phosphor-icons/core to 2.1.1 as a development dependency. The generator creates typed icon definitions from its SVG paths and preserves duotone opacity. Phosphor is not a runtime dependency of the published package.

npm run generate:icons
npm run check:icons

Generated files are committed so contributors and consumers can inspect the artwork. To update upstream icons, update the pinned version, regenerate, review the changes, and run the checks. Do not edit generated icon definitions by hand.

Contributing

Bug reports, Angular compatibility fixes, documentation improvements, and accessibility improvements are welcome. Open an issue for larger API changes before implementation. Keep changes focused and include tests for behavior changes. Pull requests run generation checks, component tests, the library build, and the demo build. See CONTRIBUTING.md for the contribution workflow.

Release

The workspace root is private. Only the compiled Angular package in dist/ng-phosphor is publishable.

Check the complete release before publishing:

npm run release:check

This verifies generated artwork, runs component and gallery tests, builds the library and demo, and checks the public package contents, exports, Angular partial compilation, and license attribution.

Create a tarball for local consumer testing:

npm run pack:lib

For the first npm release, sign in with the account that owns the @wtiger001 scope:

npm login --registry=https://registry.npmjs.org/
npm whoami --registry=https://registry.npmjs.org/
npm run publish:lib

The publish script repeats the checks and publishes version 0.1.0 publicly to npmjs.org. Complete npm's authentication or two-factor prompt if required. For an explicit one-time password, use the direct command after the checks:

npm publish ./dist/ng-phosphor --access public --registry=https://registry.npmjs.org/ --otp=YOUR_CODE

After publication, verify the registry version and tag the corresponding Git commit:

npm view @wtiger001/[email protected] version --registry=https://registry.npmjs.org/
git tag v0.1.0
git push origin v0.1.0

For later releases, update projects/ng-phosphor/package.json and repeat the release checks. Published name/version combinations cannot be reused. Publishing is manual. CI checks the release but does not hold npm credentials or publish automatically. See npm's scoped public package guide.

Thanks to Phosphor

A heartfelt thank-you to the Phosphor Icons team and contributors for creating and sharing such a wonderful icon library. Their thoughtful artwork, consistent styles, and generous MIT license make this Angular library possible.

Explore Phosphor Icons and visit the upstream project to support their work.

License

MIT. See LICENSE for the Angular library license and THIRD_PARTY_NOTICES.md for the original Phosphor license.