Documentation / Icons

Icons are optional content.

Aevko uses Lucide in its own documentation, while installed components remain independent of every icon library.

Static Lucide import

Install Lucide only in the application that renders it. Import each standalone icon directly for tree-shaking; do not register the complete collection.

import { Component } from '@angular/core';
import { LucideSave } from '@lucide/angular';
import { AevkoButton } from './ui/button';

@Component({
  standalone: true,
  imports: [AevkoButton, LucideSave],
  templateUrl: './save-button.component.html',
})
export class SaveButtonComponent {}

<button aevkoButton>
  <svg lucideSave aevkoButtonIconStart class="size-4" aria-hidden="true">
  </svg>
  Save changes
</button>

SVG or another library

Slot attributes describe placement, not implementation. The same slot accepts inline SVG, Tabler, Heroicons, an image or a custom Angular component.

<button aevkoButton variant="outline">
  <svg aevkoButtonIconStart class="size-5 text-current" viewBox="0 0 24 24" aria-hidden="true">
    <path d="..." fill="currentColor" />
  </svg>
  Custom icon
</button>

Styling and accessibility

Documentation icons use 16 px, 1.75 stroke width, currentColor and inline alignment. Override size and color with Tailwind or your own class. Decorative icons stay aria-hidden; icon-only controls still need an accessible name.

Running npx aevko-ui@latest add button, dialog or sidebar never installs @lucide/angular.