Icon

import { Component } from "@angular/core";
import { matDarkModeRound, matLightModeRound } from "@ng-icons/material-icons/round";
import { IconComponent } from "@/components/icon/icon.component";

@Component({
  selector: "rui-icon-demo",
  template: `
    <div class="flex gap-2">
      <rui-icon [icon]="matLightModeRound" [tooltip]="'Switch to light mode'"></rui-icon>
      <rui-icon [icon]="matDarkModeRound"></rui-icon>
    </div>
  `,
  imports: [IconComponent],
})
export class IconDemoComponent {
  protected readonly matLightModeRound = matLightModeRound;
  protected readonly matDarkModeRound = matDarkModeRound;
}

import { ChangeDetectionStrategy, Component, HostBinding, Input } from "@angular/core";
import { NgIconComponent } from "@ng-icons/core";

@Component({
  selector: "rui-icon",
  imports: [NgIconComponent],
  template: `
    <ng-icon class="text-xl" [title]="tooltip ?? ''" [svg]="icon"></ng-icon>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconComponent {
  @HostBinding("class") hostClass: string = "flex aspect-square";

  /**
   * The icon SVG.
   */
  @Input({ required: true }) icon!: string;

  /**
   * The tooltip to display when hovering over the icon.
   */
  @Input() tooltip: string | undefined;
}