Chapter 107: Stroke width

Core Idea

Learn how to adjust the stroke width of icons in your Angular application using the strokeWidth input or adjust the strokeWidth appearance using the absoluteStrokeWidth input.

Key Concepts

• Adjusting stroke width with the strokeWidth input
• Absolute stroke width

Code Examples

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

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

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

Key Takeaways

1. Adjusting stroke width with the strokeWidth input
2. Absolute stroke width

Connects To

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