feat(packages/angular): add new @lucide/angular package by karsa-mistmere · Pull Request #3897 · lucide-icons/lucide

karsa-mistmere · 2025-12-19T08:53:11Z

Description

Adds new standalone-first Angular package that better matches the ecosystem established by lucide-react:

one standalone component per icon
dynamic icon component with IconNode/name input that accepts:
- icon components
- icon nodes from the lucide/@lucide/icons packages
- icon names for icons provided through provideLucideIcons via dependency injection
default icon configuration provided through provideLucideConfig via dependency injection
support for all configuration options established in earlier packages
support for providing an accessible label via an <svg:title> element. Unless this accessible label is provided, the SVGs will automatically add aria-hidden="true"

TODO

Add package documentation to site
Add more documentation to code
Explore the possibility of a migration schematic from lucide-angular

TODO, but requires #3881

Add @lucide/angular/dynamic entry point for dynamic icon imports using @lucide/icons
Add @lucide/angular/material entry point for registering icon data via MatIconRegistry

Before Submitting

I've read the Contribution Guidelines.
I've checked if there was an existing PR that solves the same issue.

…e/angular

…ckage

…public members

Copilot

Pull request overview

This PR introduces a new modern Angular package @lucide/angular that replaces the legacy lucide-angular package with a standalone-first, signal-based implementation optimized for Angular 17+.

Key changes:

Adds a new @lucide/angular package with standalone components, dependency injection providers, and signal-based reactive architecture
Introduces per-icon components for better tree-shaking alongside a dynamic LucideIcon component
Updates build tooling to support non-default exports and Angular-specific configuration needs

Reviewed changes

Copilot reviewed 53 out of 56 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
`packages/angular/*`	New Angular package with standalone components, types, utilities, tests, and documentation
`tools/build-icons/**`	Enhanced build tooling to support Angular's export requirements and alias handling
`packages/lucide-react-native/**`	Refactored exports and added icons entry point for better module organization
`docs/guide/packages/angular.md`	New comprehensive documentation for `@lucide/angular`
`docs/guide/packages/lucide-angular.md`	Updated legacy package docs with deprecation notice
`icons/toolbox.*`	New toolbox icon addition
`icons/paint-bucket.svg`	Updated paint-bucket icon paths
`.github/workflows/angular.yml`	New CI workflow for Angular package testing

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

ericfennis

Suggestions and ideas, I've checked the type naming with other libraries. Would be nice if we could make it consistent.

…rom separate node+name – no more toKebabCase hackery feat(packages/angular): renamed LucideIconComponentType => LucideIcon, and LucideIcon => LucideDynamicIcon feat(packages/angular): added backwards compatible CSS class support feat(packages/angular): switched to vector-effect: non-scaling-stroke implementation from computed stroke width feat(packages/angular): rewrote icon provider to only accept a list of self-described icons – no more toKebabCase hackery & as an added bonus automatic backwards compatible alias support 🚀 feat(packages/angular): added legacy icon node helper function for passing legacy icons to providers test(packages/angular): added unit tests on LUCIDE_CONFIG provider usage

karsa-mistmere · 2026-02-23T12:39:39Z

@ericfennis: added some extensive rewrites:

as per feat(packages/angular): add new @lucide/angular package #3897 (comment), I switched from separate node+name to self-describing LucideIconData objects similar to @lucide/icons – so no more toKebabCase hackery anywhere in the code apart from some legacy helpers, and as an added bonus there is now backwards compatible alias support for name based icon providers 🚀
as per feat(packages/angular): add new @lucide/angular package #3897 (comment) I renamed LucideIconComponentType => LucideIcon, and LucideIcon => LucideDynamicIcon
I added backwards compatible CSS class support as already implemented in @lucide/icons
I switched to the vector-effect: non-scaling-stroke implementation from using computed stroke widths
as requested, I added some unit tests on LUCIDE_CONFIG provider usage

ericfennis · 2026-02-27T12:05:17Z

@karsa-mistmere Awesome work!

# Conflicts: # .github/ISSUE_TEMPLATE/02_bug_report.yml # .github/ISSUE_TEMPLATE/04_feature_request.yml # pnpm-lock.yaml # tools/build-icons/building/generateIconFiles.ts # tools/build-icons/types.ts

…nction, refactor export template to use the iconData object as defined in ExportTemplate

… :'(

…_ projected content)

Copilot

Pull request overview

Copilot reviewed 53 out of 54 changed files in this pull request and generated 11 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-20T12:11:45Z

+/**
+ * Provide Lucide icons by name.
+ *
+ * @remarks
+ * Warning! This provider will convert dictionary keys to lower-kebab-case.
+ *
+ * @param icons Either a dictionary of icons or a list of Angular icon components.
+ *
+ * @usage
+ * ```ts
+ * import { provideLucideIcons, SquareCheck } from '@lucide/angular';
+ * import { MyCustomIcon } from './custom-icons/my-custom-icon';
+ *
+ * providers: [
+ *   provideLucideIcons({
+ *     SquareCheck,
+ *     MyCustomIcon, // LucideIconData
+ *   }),
+ * ]
+ * ```
+ *
+ * ```html
+ * <svg lucideIcon="my-custom-icon" />
+ * ```
+ */
+export function provideLucideIcons(...icons: Array<LucideIcon | LucideIconData>): Provider {
+  return {


The provideLucideIcons JSDoc is inconsistent with the actual API: it claims it accepts a dictionary and converts keys to lower-kebab-case, but the function signature is variadic and the implementation only uses iconData.name/aliases as-is. Either update the docs/examples to call provideLucideIcons(icon1, icon2, ...) (or ...array) and remove the kebab-case warning, or change the function to actually accept a dictionary/array as documented.

Copilot · 2026-03-20T12:11:46Z

+@Component({
+  templateUrl: './foobar.html',
+  // For using by name via provider:
+  providers: [provideLucideIcons({ coconut })],


This snippet uses providers: [provideLucideIcons({ coconut })], but provideLucideIcons does not accept an object map in the current implementation (it expects LucideIcon | LucideIconData arguments). Either change the example to pass the icon data directly (and/or spread an array), or update provideLucideIcons to support object maps as documented.

Suggested change

providers: [provideLucideIcons({ coconut })],

providers: [provideLucideIcons(coconut)],

Co-authored-by: Copilot <[email protected]>

ericfennis and others added 2 commits December 13, 2025 20:12

Add new lucide angular package

1075461

feat(packages/angular): added initial @lucide/angular package

1b72561

github-actions Bot added the 📦 dependencies Pull requests that update a dependency file label Dec 19, 2025

karsa-mistmere added 3 commits December 19, 2025 09:54

feat(packages/angular): update readme

7ced22b

feat(packages/angular): update angular.json

1a1843c

docs(packages/angular): added (for now) full documentation for @lucid…

a784e99

…e/angular

github-actions Bot added 📖 documentation Improvements or additions to documentation 🌍 site Has to do something with the Lucide website labels Dec 19, 2025

vercel Bot deployed to Preview December 19, 2025 11:17 View deployment

docs(packages/angular): added migration guide from lucide-angular

f6c1412

karsa-mistmere requested review from ericfennis and jguddas December 19, 2025 13:03

vercel Bot deployed to Preview December 19, 2025 13:14 View deployment

karsa-mistmere added 9 commits December 19, 2025 14:32

fix(github): fix package label syntax 😅

dbf5328

Merge branch 'main' into angular-package

d6149a2

fix(lint): fix linting issues

18b1b03

Merge remote-tracking branch 'origin/angular-package' into angular-pa…

19dd078

…ckage

fix(github/angular): add prebuild stage

e9bd52b

fix(github/angular): add prebuild stage & fix tests

e2c1696

fix(github/angular): fix LucideIconComponentType, update with _real_ …

4ca96b7

…public members

fix(github/angular): add prebuild to build step manually

4257c22

fix(github/angular): downgrade vitest

4f9bfb1

ericfennis changed the base branch from main to next December 22, 2025 07:09

ericfennis requested a review from Copilot December 22, 2025 07:10

Copilot started reviewing on behalf of ericfennis December 22, 2025 07:10 View session

Copilot AI reviewed Dec 22, 2025

View reviewed changes

karsa-mistmere added 2 commits December 22, 2025 10:59

fix(packages/angular): fix migration guide code example

329367a

fix(packages): add vitest + @vitest/* to pnpm overrides

aeb5220

github-actions Bot added 🎨 icon About new icons ⚛️ react native package About the React Native package labels Dec 22, 2025

ericfennis reviewed Feb 20, 2026

View reviewed changes

Comment thread packages/angular/src/types.ts Outdated

karsa-mistmere added 3 commits February 23, 2026 13:20

fix(packages/angular): fix linting issues

7236f20

Merge branch 'next' into angular-package

863b333

vercel Bot deployed to Preview February 23, 2026 12:50 View deployment

karsa-mistmere mentioned this pull request Mar 6, 2026

fix(docs): fix incorrect Angular integration example for lucide-lab #4101

Merged

2 tasks

Merge branch 'next' into angular-package

1f3b80d

vercel Bot deployed to Preview March 11, 2026 07:35 View deployment

Merge branch 'refs/heads/next' into angular-package

4a95192

# Conflicts: # .github/ISSUE_TEMPLATE/02_bug_report.yml # .github/ISSUE_TEMPLATE/04_feature_request.yml # pnpm-lock.yaml # tools/build-icons/building/generateIconFiles.ts # tools/build-icons/types.ts

vercel Bot deployed to Preview March 13, 2026 11:47 View deployment

karsa-mistmere and others added 2 commits March 13, 2026 12:49

feat(packages/angular): extract createLucideIcon logic into helper fu…

647cc76

…nction, refactor export template to use the iconData object as defined in ExportTemplate

Merge branch 'next' into angular-package

da870f7

vercel Bot deployed to Preview March 19, 2026 10:16 View deployment

ericfennis and others added 5 commits March 19, 2026 11:28

Replace author

76c9ebb

Remove private field

3a79e57

fix(packages/angular): remove createLucideIcon, it breaks the package…

0b4975a

… :'(

fix(packages/angular): fix rendering order of child elements (_before…

2165fce

…_ projected content)

Format package.json

e293a29

ericfennis marked this pull request as ready for review March 20, 2026 12:05

Merge branch 'next' into angular-package

43fd483

ericfennis requested a review from Copilot March 20, 2026 12:05

Copilot started reviewing on behalf of ericfennis March 20, 2026 12:06 View session

Copilot AI reviewed Mar 20, 2026

View reviewed changes

karsa-mistmere and others added 2 commits March 20, 2026 13:36

Update docs/guide/packages/angular.md

7ca44b2

Co-authored-by: Copilot <[email protected]>

Update packages/angular/MIGRATION.md

1f4a942

Co-authored-by: Copilot <[email protected]>

ericfennis approved these changes Mar 20, 2026

View reviewed changes

ericfennis merged commit a0e202d into next Mar 20, 2026
32 checks passed

ericfennis deleted the angular-package branch March 20, 2026 14:31

	providers: [provideLucideIcons({ coconut })],
	providers: [provideLucideIcons(coconut)],

Uh oh!

Conversation

karsa-mistmere commented Dec 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

TODO

TODO, but requires #3881

Before Submitting

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ericfennis left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

karsa-mistmere commented Feb 23, 2026

Uh oh!

ericfennis commented Feb 27, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

karsa-mistmere commented Dec 19, 2025 •

edited

Loading