Chapter 105: Color

Core Idea

Learn how to adjust the color of icons in your Angular application using the color input or by using parent elements text color value.

Key Concepts

• Adjust the color using the color input
• Using parent elements text color value

Code Examples

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

@Component({
  selector: 'app',
  imports: [LucideSmile],
  template: `<svg lucideSmile color="#3e9392" />`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

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

Key Takeaways

1. Adjust the color using the color input
2. Using parent elements text color value

Connects To

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