From e4fcd545f6cdd83e6b77c9b7fb3d79c13def7ccc Mon Sep 17 00:00:00 2001
From: MGREMY <miguel.gremy72+pro@gmail.com>
Date: Sun, 6 Jul 2025 22:49:21 +0200
Subject: [PATCH] docs: fix icons not loaded

---
 .../alert/_dismissable.component.ts           |  4 ++--
 .../components/badge/_dismiss.component.html  | 24 ++++++++++++++-----
 .../components/badge/_dismiss.component.ts    |  8 +++----
 .../breadcrumb/_default.component.html        |  6 ++---
 .../breadcrumb/src/breadcrumb-item/theme.ts   |  2 +-
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/apps/docs/docs/components/alert/_dismissable.component.ts b/apps/docs/docs/components/alert/_dismissable.component.ts
index eeb53a22..0a1761c5 100644
--- a/apps/docs/docs/components/alert/_dismissable.component.ts
+++ b/apps/docs/docs/components/alert/_dismissable.component.ts
@@ -1,13 +1,13 @@
 import { Alert, AlertButton, AlertContent } from 'flowbite-angular/alert';
 import { Icon } from 'flowbite-angular/icon';
-import { close } from 'flowbite-angular/icon/outline/general';
+import { close, infoCircle } from 'flowbite-angular/icon/outline/general';
 
 import { Component } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 
 @Component({
   imports: [Alert, Icon, AlertButton, AlertContent],
-  providers: [provideIcons({ close })],
+  providers: [provideIcons({ close, infoCircle })],
   templateUrl: './_dismissable.component.html',
   host: {
     class: 'flex flex-wrap flex-col gap-3 p-6',
diff --git a/apps/docs/docs/components/badge/_dismiss.component.html b/apps/docs/docs/components/badge/_dismiss.component.html
index 9f6b3aa7..2b3ed237 100644
--- a/apps/docs/docs/components/badge/_dismiss.component.html
+++ b/apps/docs/docs/components/badge/_dismiss.component.html
@@ -1,5 +1,7 @@
 <span flowbiteBadge>
-  <flowbite-icon name="infoCircle" />
+  <flowbite-icon
+    name="infoCircle"
+    class="size-4 stroke-2" />
   <span class="ml-2">default</span>
   <button flowbiteBadgeButton>
     <flowbite-icon
@@ -11,7 +13,9 @@
 <span
   flowbiteBadge
   color="info">
-  <flowbite-icon name="close" />
+  <flowbite-icon
+    name="infoCircle"
+    class="size-4 stroke-2" />
   <span class="ml-2">info</span>
   <button flowbiteBadgeButton>
     <flowbite-icon
@@ -23,7 +27,9 @@
 <span
   flowbiteBadge
   color="failure">
-  <flowbite-icon name="close" />
+  <flowbite-icon
+    name="infoCircle"
+    class="size-4 stroke-2" />
   <span class="ml-2">failure</span>
   <button flowbiteBadgeButton>
     <flowbite-icon
@@ -35,7 +41,9 @@
 <span
   flowbiteBadge
   color="warning">
-  <flowbite-icon name="close" />
+  <flowbite-icon
+    name="infoCircle"
+    class="size-4 stroke-2" />
   <span class="ml-2">warning</span>
   <button flowbiteBadgeButton>
     <flowbite-icon
@@ -47,7 +55,9 @@
 <span
   flowbiteBadge
   color="success">
-  <flowbite-icon name="close" />
+  <flowbite-icon
+    name="infoCircle"
+    class="size-4 stroke-2" />
   <span class="ml-2">success</span>
   <button flowbiteBadgeButton>
     <flowbite-icon
@@ -59,7 +69,9 @@
 <span
   flowbiteBadge
   color="primary">
-  <flowbite-icon name="close" />
+  <flowbite-icon
+    name="infoCircle"
+    class="size-4 stroke-2" />
   <span class="ml-2">primary</span>
   <button flowbiteBadgeButton>
     <flowbite-icon
diff --git a/apps/docs/docs/components/badge/_dismiss.component.ts b/apps/docs/docs/components/badge/_dismiss.component.ts
index bdee70ed..35cd918c 100644
--- a/apps/docs/docs/components/badge/_dismiss.component.ts
+++ b/apps/docs/docs/components/badge/_dismiss.component.ts
@@ -1,13 +1,13 @@
-import { Badge } from 'flowbite-angular/badge';
+import { Badge, BadgeButton } from 'flowbite-angular/badge';
 import { Icon } from 'flowbite-angular/icon';
-import { close } from 'flowbite-angular/icon/outline/general';
+import { close, infoCircle } from 'flowbite-angular/icon/outline/general';
 
 import { Component } from '@angular/core';
 import { provideIcons } from '@ng-icons/core';
 
 @Component({
-  imports: [Badge, Icon],
-  providers: [provideIcons({ close })],
+  imports: [Badge, Icon, BadgeButton],
+  providers: [provideIcons({ infoCircle, close })],
   templateUrl: './_dismiss.component.html',
   host: {
     class: 'flex flex-wrap flex-row gap-3 p-6',
diff --git a/apps/docs/docs/components/breadcrumb/_default.component.html b/apps/docs/docs/components/breadcrumb/_default.component.html
index 068a70b4..bd064006 100644
--- a/apps/docs/docs/components/breadcrumb/_default.component.html
+++ b/apps/docs/docs/components/breadcrumb/_default.component.html
@@ -4,19 +4,19 @@
       <flowbite-icon
         name="home"
         class="size-4 stroke-2" />
-      <span>Home</span>
+      <span class="ml-2">Home</span>
     </li>
     <li flowbiteBreadcrumbItem>
       <flowbite-icon
         name="chevron-right"
         class="size-4 stroke-2" />
-      <span>Projects</span>
+      <span class="ml-2">Projects</span>
     </li>
     <li flowbiteBreadcrumbItem>
       <flowbite-icon
         name="chevron-right"
         class="size-4 stroke-2" />
-      <span>Flowbite</span>
+      <span class="ml-2">Flowbite</span>
     </li>
   </ol>
 </nav>
diff --git a/libs/flowbite-angular/breadcrumb/src/breadcrumb-item/theme.ts b/libs/flowbite-angular/breadcrumb/src/breadcrumb-item/theme.ts
index f1a21abb..b8dc1e6a 100644
--- a/libs/flowbite-angular/breadcrumb/src/breadcrumb-item/theme.ts
+++ b/libs/flowbite-angular/breadcrumb/src/breadcrumb-item/theme.ts
@@ -14,7 +14,7 @@ export interface FlowbiteBreadcrumbItemHostTheme {
 
 export const flowbiteBreadcrumbItemTheme: FlowbiteBreadcrumbItemTheme = createTheme({
   host: {
-    base: 'group flex items-center justify-between text-sm font-medium data-hover:cursor-pointer',
+    base: 'group inline-flex items-center justify-between text-sm font-medium data-hover:cursor-pointer',
     transition: '',
     color: {
       default: {