Filled Icons

Fills are not officially supported by Lucide.

However, since the icons are standard SVG elements, SVG attributes such as fill can still be applied. Depending on the icon, this may produce acceptable results.

Example with stars:

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 {
}

Open Sandbox