Color

By default, all icons have the color value: currentColor. This keyword uses the element's computed text color value to represent the icon color.

Read more about currentColor on MDN.

Adjust the color using the color input

The color can be adjusted by binding the color input of the element.

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

Open Sandbox

Using parent elements text color value

Because the color of lucide icons uses currentColor, the color of the icon depends on the computed color of the element, or it inherits it from its parent.

For example, if a parent element's color value is #fff and one of the children is a lucide icon, the color of the icon will be rendered as #fff. This is browser native behavior.

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

@Component({
  selector: 'app',
  imports: [LucideThumbsUp],
  template: `
    <button style="color:#fff">
      <svg lucideThumbsUp></svg>
      Like
    </button>
  `,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

Open Sandbox