Chapter 112: Filled Icons

Core Idea

Fills are not officially supported, but can still be applied using standard SVG attributes. This may in some cases produce acceptable results.

Key Concepts

• Example with stars:

Code Examples

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

@Component({
  selector: 'app',
  imports: [LucideStar, LucideStarHalf],
  template: `
<div class="star-rating">
  <div class="stars">
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
    <svg lucideStar fill="#111" strokeWidth="0" />
  </div>
  <div class="stars rating">
    <svg lucideStar fill="yellow" strokeWidth="0" />
    <svg lucideStar fill="yellow" strokeWidth="0" />
    <svg lucideStarHalf fill="yellow" strokeWidth="0" />
  </div>
</div>
`,
  styleUrls: ['./app.component.css', './icon.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

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

Key Takeaways

1. Example with stars:

Connects To

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