Lazy Loading Icons

How Tree-Shaking Works

Every icon in the library is exported as an individual constant. When you import only the icons you use, your bundler (webpack, esbuild) automatically eliminates all unused icon definitions from the final build. This means a project using 20 icons will not bundle the remaining 7000+ definitions.

The key principle: only imported icons end up in your bundle. No global registry, no side effects.

Route-Level Registration

Register icons per lazy-loaded route using the providers array in your route configuration. Icons registered this way are only loaded when the user navigates to that route.

// feature.routes.ts
import { Routes } from '@angular/router';
import { provideSolarIcons } from '@rchernando/solar-icons';
import { CartBold, BagOutline } from '@rchernando/solar-icons/shopping-ecommerce';
import { FeatureComponent } from './feature.component';

export const featureRoutes: Routes = [{
  path: '',
  providers: [provideSolarIcons(CartBold, BagOutline)],
  component: FeatureComponent
}];

Full Example: Multi-Feature App

In a larger application, each feature module registers only its own icons. Shared icons can be registered at the app level, while feature-specific icons stay in their respective routes.

// app.routes.ts
import { Routes } from '@angular/router';
import { provideSolarIcons } from '@rchernando/solar-icons';
import { HomeBold } from '@rchernando/solar-icons/essentional-ui';
import { MenuLinear } from '@rchernando/solar-icons/essentional-ui';

export const routes: Routes = [
  {
    path: '',
    providers: [provideSolarIcons(HomeBold, MenuLinear)],
    loadComponent: () => import('./home/home.component').then(m => m.HomeComponent)
  },
  {
    path: 'shop',
    loadChildren: () => import('./shop/shop.routes').then(m => m.shopRoutes)
    // shop.routes.ts registers CartBold, BagOutline, etc.
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.routes').then(m => m.settingsRoutes)
    // settings.routes.ts registers SettingsOutline, UserLinear, etc.
  }
];

Benefits

• --
  Smaller initial bundle. Only icons needed for the landing page are included in the main chunk.
• --
  Faster navigation. Feature-specific icons load on demand as the user navigates to each route.
• --
  Automatic tree-shaking. Unused icon imports are stripped from the build with no additional configuration.
• --
  Clear dependency graph. Each route explicitly declares the icons it depends on, making the codebase easier to maintain.