Chapter 106: Sizing

Core Idea

Learn how to adjust the size of icons in your Angular application using the size input or by using CSS.

Key Concepts

• Adjusting the icon size using the size input
• Adjusting the icon size via CSS

Code Examples

import { Component, ViewEncapsulation } from "@angular/core";
import { LucideLandmark } from "@lucide/angular";

@Component({
  selector: 'app',
  imports: [LucideLandmark],
  template: `<svg lucideLandmark [size]="64" />`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

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

Key Takeaways

1. Adjusting the icon size using the size input
2. Adjusting the icon size via CSS

Connects To

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