Chapter 110: Global Styling

Core Idea

Learn how to style all icons globally in your Angular application using CSS or the provideLucideConfig provider.

Key Concepts

• The color of the icons can be changed using the color property.
• The size of the icons can be changed using width and height.
• The stroke width of the icons can be changed using stroke-width.

Code Examples

import { ApplicationConfig } from '@angular/core';
import { provideLucideConfig } from '@lucide/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideLucideConfig({
      strokeWidth: 1.5
    }),
  ]
};

• What it demonstrates: Global Styling usage pattern from the official Lucide docs.

Key Takeaways

1. The color of the icons can be changed using the color property.
2. The size of the icons can be changed using width and height.
3. The stroke width of the icons can be changed using stroke-width.

Connects To

• Angular: part of the Angular section of the Lucide docs.
• Lucide for Angular: overview page for this section.