Chapter 113: Combining icons

Core Idea

Learn how to combine multiple icons into a single icon nested SVG elements in your Angular application.

Key Concepts

• With custom SVG elements

Code Examples

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

@Component({
  selector: 'app',
  imports: [LucideScan, LucideUser],
  template: `
      <svg lucideScan [size]="48">
        <svg lucideUser
          [size]="12"
          x="6"
          y="6"
          [strokeWidth]="4"
          [absoluteStrokeWidth]="true"
        />
      </svg>`,
  styleUrls: ['./app.component.css'],
  encapsulation: ViewEncapsulation.None,
})
export class App {
}

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

Key Takeaways

1. With custom SVG elements

Connects To

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