feat: use IconComponent in other components

apps/docs/src/assets/examples/button/gradient-outline.component.html

@@ -12,7 +12,7 @@
   <flowbite-button
     fill="outline"
     gradientDuoTone="greenToBlue">
-    Green to Blue*
+    Green to Blue
   </flowbite-button>
   <flowbite-button
     fill="outline"

libs/flowbite-angular/src/lib/components/accordion/accordion-content.component.ts

@@ -11,11 +11,15 @@ import { Component, inject, input, signal } from '@angular/core';
   standalone: true,
   imports: [NgIf, NgClass],
   selector: 'flowbite-accordion-content',
-  templateUrl: './accordion-content.component.html',
+  template: `
+    <ng-container *ngIf="accordionPanelStateService.select('isOpen')()">
+      <ng-content />
+    </ng-container>
+  `,
 })
 export class AccordionContentComponent extends BaseComponent {
-  public readonly themeService = inject(AccordionContentThemeService);
-  public readonly accordionPanelStateService: AccordionPanelStateService = inject(AccordionPanelStateService);
+  protected readonly themeService = inject(AccordionContentThemeService);
+  protected readonly accordionPanelStateService = inject(AccordionPanelStateService);
 
   public override contentClasses = signal<properties.AccordionContentClass>(properties.AccordionContentClassInstance);
 

libs/flowbite-angular/src/lib/components/accordion/accordion-panel.component.ts

@@ -11,7 +11,7 @@ import { booleanAttribute, Component, inject, input, signal } from '@angular/cor
   standalone: true,
   imports: [],
   selector: 'flowbite-accordion-panel',
-  templateUrl: './accordion-panel.component.html',
+  template: `<ng-content />`,
   providers: [
     {
       provide: AccordionPanelStateService,
@@ -26,8 +26,8 @@ import { booleanAttribute, Component, inject, input, signal } from '@angular/cor
   ],
 })
 export class AccordionPanelComponent extends BaseComponent implements OnInit {
-  public readonly themeService = inject(AccordionPanelThemeService);
-  public readonly accordionPanelStateService: AccordionPanelStateService = inject(AccordionPanelStateService);
+  protected readonly themeService = inject(AccordionPanelThemeService);
+  protected readonly accordionPanelStateService = inject(AccordionPanelStateService);
 
   public override contentClasses = signal<properties.AccordionPanelClass>(properties.AccordionPanelClassInstance);
 

libs/flowbite-angular/src/lib/components/accordion/accordion-title.component.ts

@@ -1,23 +1,37 @@
 import type { DeepPartial } from '../../common';
 import { AccordionPanelStateService, AccordionStateService } from '../../services';
 import { booleanToFlowbiteBoolean } from '../../utils/boolean.util';
+import { CHEVRON_DOWN_SVG_ICON } from '../../utils/icon.list';
 import { BaseComponent } from '../base.component';
+import { IconComponent, IconRegistry } from '../icon';
 import * as properties from './accordion-title.theme';
 import { AccordionTitleThemeService } from './accordion-title.theme.service';
 
 import { NgClass } from '@angular/common';
+import type { OnInit } from '@angular/core';
 import { Component, HostListener, inject, input, signal } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   standalone: true,
-  imports: [NgClass],
+  imports: [NgClass, IconComponent],
   selector: 'flowbite-accordion-title',
-  templateUrl: './accordion-title.component.html',
+  template: `
+    <h2>
+      <ng-content />
+    </h2>
+    <flowbite-icon
+      svgIcon="flowbite-angular:chevron-down"
+      class="h-6 w-6 shrink-0 duration-200"
+      [class.rotate-180]="accordionPanelStateService.select('isOpen')()" />
+  `,
 })
-export class AccordionTitleComponent extends BaseComponent {
-  public readonly themeService = inject(AccordionTitleThemeService);
-  public readonly accordionPanelStateService: AccordionPanelStateService = inject(AccordionPanelStateService);
-  public readonly accordionStateService: AccordionStateService = inject(AccordionStateService);
+export class AccordionTitleComponent extends BaseComponent implements OnInit {
+  protected readonly themeService = inject(AccordionTitleThemeService);
+  protected readonly accordionPanelStateService = inject(AccordionPanelStateService);
+  protected readonly accordionStateService = inject(AccordionStateService);
+  protected readonly iconRegistry = inject(IconRegistry);
+  protected readonly domSanitizer = inject(DomSanitizer);
 
   public override contentClasses = signal<properties.AccordionTitleClass>(properties.AccordionTitleClassInstance);
 
@@ -37,6 +51,16 @@ export class AccordionTitleComponent extends BaseComponent {
   }
   //#endregion
 
+  public override ngOnInit() {
+    super.ngOnInit();
+
+    this.iconRegistry.addRawSvgIconInNamepsace(
+      'flowbite-angular',
+      'chevron-down',
+      this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_DOWN_SVG_ICON),
+    );
+  }
+
   @HostListener('click')
   public onClick(): void {
     const isOpen = this.accordionPanelStateService.select('isOpen')();

libs/flowbite-angular/src/lib/components/accordion/accordion.component.ts

@@ -16,7 +16,7 @@ import { booleanAttribute, Component, inject, input, signal } from '@angular/cor
   standalone: true,
   imports: [NgClass],
   selector: 'flowbite-accordion',
-  templateUrl: './accordion.component.html',
+  template: `<ng-content />`,
   providers: [
     {
       provide: AccordionStateService,
@@ -31,8 +31,8 @@ import { booleanAttribute, Component, inject, input, signal } from '@angular/cor
   ],
 })
 export class AccordionComponent extends BaseComponent implements OnInit {
-  public readonly themeService = inject(AccordionThemeService);
-  public readonly accordionStateService: AccordionStateService = inject(AccordionStateService);
+  protected readonly themeService = inject(AccordionThemeService);
+  protected readonly accordionStateService = inject(AccordionStateService);
 
   public override contentClasses = signal<properties.AccordionClass>(properties.AccordionClassInstance);
 

libs/flowbite-angular/src/lib/components/alert/alert.component.ts

@@ -1,23 +1,47 @@
 import type { DeepPartial } from '../../common/flowbite.type';
 import { booleanToFlowbiteBoolean } from '../../utils/boolean.util';
+import { CLOSE_SVG_ICON } from '../../utils/icon.list';
 import { BaseComponent } from '../base.component';
+import { IconComponent, IconRegistry } from '../icon';
 import * as properties from './alert.theme';
 import { AlertThemeService } from './alert.theme.service';
 
 import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
 import type { OnInit, TemplateRef } from '@angular/core';
 import { booleanAttribute, Component, HostBinding, inject, input, signal } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass, NgTemplateOutlet],
+  imports: [NgIf, NgClass, NgTemplateOutlet, IconComponent],
   selector: 'flowbite-alert',
-  templateUrl: './alert.component.html',
+  template: `
+    <div class="flex items-center">
+      <ng-container [ngTemplateOutlet]="icon()"></ng-container>
+      <div>
+        <ng-content />
+      </div>
+      <button
+        type="button"
+        [ngClass]="contentClasses()!.closeButtonClass"
+        *ngIf="dismiss()"
+        aria-label="Close"
+        (click)="callDismiss()">
+        <span class="sr-only">Close</span>
+        <flowbite-icon
+          svgIcon="flowbite-angular:close"
+          class="h-5 w-5" />
+      </button>
+    </div>
+    <ng-container [ngTemplateOutlet]="additionalContent()"></ng-container>
+  `,
 })
 export class AlertComponent extends BaseComponent implements OnInit {
   @HostBinding('attr.role') role = 'alert';
 
-  public readonly themeService = inject(AlertThemeService);
+  protected readonly themeService = inject(AlertThemeService);
+  protected readonly iconRegistry = inject(IconRegistry);
+  protected readonly domSanitizer = inject(DomSanitizer);
 
   public override contentClasses = signal<properties.AlertClass>(properties.AlertClassInstance);
 
@@ -46,6 +70,16 @@ export class AlertComponent extends BaseComponent implements OnInit {
   }
   //#endregion
 
+  public override ngOnInit() {
+    super.ngOnInit();
+
+    this.iconRegistry.addRawSvgIconInNamepsace(
+      'flowbite-angular',
+      'close',
+      this.domSanitizer.bypassSecurityTrustHtml(CLOSE_SVG_ICON),
+    );
+  }
+
   public callDismiss() {
     const func = this.dismiss();
 

libs/flowbite-angular/src/lib/components/badge/badge.component.ts

@@ -18,10 +18,10 @@ import { RouterLink } from '@angular/router';
   standalone: true,
   imports: [NgClass, RouterLink],
   selector: 'flowbite-badge',
-  templateUrl: './badge.component.html',
+  template: `<ng-content />`,
 })
 export class BadgeComponent extends BaseComponent implements RoutableInterface {
-  public readonly themeService = inject(BadgeThemeService);
+  protected readonly themeService = inject(BadgeThemeService);
   public readonly flowbiteLinkRouter = inject(FlowbiteLinkRouter);
 
   public override contentClasses = signal<BadgeClass>(BadgeClassInstance);

libs/flowbite-angular/src/lib/components/breadcrumb/breadcrumb-item.component.ts

@@ -1,21 +1,32 @@
 import type { DeepPartial, FlowbiteLink } from '../../common/flowbite.type';
 import type { RoutableInterface } from '../../interfaces';
 import { FlowbiteLinkRouter } from '../../services';
+import { CHEVRON_RIGHT_SVG_ICON } from '../../utils/icon.list';
 import { BaseComponent } from '../base.component';
+import { IconComponent, IconRegistry } from '../icon';
 import * as properties from './breadcrumb-item.theme';
 import { BreadcrumbItemThemeService } from './breadcrumb-item.theme.service';
 
 import { NgClass, NgIf, NgTemplateOutlet } from '@angular/common';
+import type { OnInit } from '@angular/core';
 import { Component, HostListener, inject, input, signal } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
 
 @Component({
   standalone: true,
-  imports: [NgIf, NgClass, NgTemplateOutlet],
+  imports: [NgIf, NgClass, NgTemplateOutlet, IconComponent],
   selector: 'flowbite-breadcrumb-item',
-  templateUrl: './breadcrumb-item.component.html',
+  template: `
+    <flowbite-icon
+      [ngClass]="contentClasses().breadcrumbIconClass"
+      svgIcon="flowbite-angular:chevron-right" />
+    <ng-content />
+  `,
 })
-export class BreadcrumbItemComponent extends BaseComponent implements RoutableInterface {
-  public readonly themeService = inject(BreadcrumbItemThemeService);
+export class BreadcrumbItemComponent extends BaseComponent implements OnInit, RoutableInterface {
+  protected readonly themeService = inject(BreadcrumbItemThemeService);
+  protected readonly iconRegistry = inject(IconRegistry);
+  protected readonly domSanitizer = inject(DomSanitizer);
   public readonly flowbiteLinkRouter = inject(FlowbiteLinkRouter);
 
   public override contentClasses = signal<properties.BreadcrumbItemClass>(properties.BreadcrumbItemClassInstance);
@@ -36,6 +47,16 @@ export class BreadcrumbItemComponent extends BaseComponent implements RoutableIn
   }
   //#endregion
 
+  public override ngOnInit() {
+    super.ngOnInit();
+
+    this.iconRegistry.addRawSvgIconInNamepsace(
+      'flowbite-angular',
+      'chevron-right',
+      this.domSanitizer.bypassSecurityTrustHtml(CHEVRON_RIGHT_SVG_ICON),
+    );
+  }
+
   @HostListener('click')
   public async onNavigate(): Promise<void> {
     await this.flowbiteLinkRouter.navigate(this.href());

libs/flowbite-angular/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -13,12 +13,12 @@ import { Component, HostBinding, inject, input, signal } from '@angular/core';
   standalone: true,
   imports: [NgClass],
   selector: 'flowbite-breadcrumb',
-  templateUrl: './breadcrumb.component.html',
+  template: `<ng-content />`,
 })
 export class BreadcrumbComponent extends BaseComponent {
   @HostBinding('attr.aria-label') ariaLabel = 'breadcrumb';
 
-  public readonly themeService = inject(BreadcrumbThemeService);
+  protected readonly themeService = inject(BreadcrumbThemeService);
 
   public override contentClasses = signal<properties.BreadcrumbClass>(properties.BreadcrumbClassInstance);
 

libs/flowbite-angular/src/lib/components/button/button.component.ts

@@ -14,12 +14,26 @@ import { booleanAttribute, Component, HostBinding, inject, input, signal } from
   standalone: true,
   imports: [NgIf, NgClass, NgTemplateOutlet],
   selector: 'flowbite-button',
-  templateUrl: './button.component.html',
+  template: `
+    <span
+      *ngIf="gradientDuoTone() && fill() === 'outline'; else default"
+      [ngClass]="contentClasses().spanClass">
+      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
+    </span>
+
+    <ng-template #default>
+      <ng-container *ngTemplateOutlet="contentOutlet"></ng-container>
+    </ng-template>
+
+    <ng-template #contentOutlet>
+      <ng-content />
+    </ng-template>
+  `,
 })
 export class ButtonComponent extends BaseComponent {
   @HostBinding('type') hostTypeValue = 'button';
 
-  public readonly themeService = inject(ButtonThemeService);
+  protected readonly themeService = inject(ButtonThemeService);
 
   public override contentClasses = signal<properties.ButtonClass>(properties.ButtonClassInstance);