feat(accordion): add custom icon support

apps/docs/docs/components/accordion/_arrow-style.component.html

@@ -0,0 +1,85 @@
+<flowbite-accordion>
+  <flowbite-accordion-panel [isOpen]="true">
+    <flowbite-accordion-title [icon]="no_arrow">What is Flowbite ?</flowbite-accordion-title>
+    <flowbite-accordion-content>
+      <div class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is an open-source library of interactive components built on top of Tailwind CSS
+          including buttons, dropdowns, modals, navbars, and more.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out this guide to learn how to
+          <a
+            class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+            href="https://flowbite.com/docs/getting-started/introduction/">
+            Get started
+          </a>
+          and start developing websites even faster with components on top of Tailwind CSS.
+        </p>
+      </div>
+    </flowbite-accordion-content>
+  </flowbite-accordion-panel>
+  <flowbite-accordion-panel>
+    <flowbite-accordion-title [icon]="question_mark_arrow">
+      Is there a Figma file available ?
+    </flowbite-accordion-title>
+    <flowbite-accordion-content>
+      <div class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Flowbite is first conceptualized and designed using the Figma software so everything you
+          see in the library has a design equivalent in our Figma file.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Check out the
+          <a href="https://flowbite.com/figma/">Figma design system</a>
+          based on the utility classes from Tailwind CSS and components from Flowbite.
+        </p>
+      </div>
+    </flowbite-accordion-content>
+  </flowbite-accordion-panel>
+  <flowbite-accordion-panel>
+    <flowbite-accordion-title>
+      What are the differences between Flowbite and Tailwind UI ?
+    </flowbite-accordion-title>
+    <flowbite-accordion-content>
+      <div class="p-5">
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          The main difference is that the core components from Flowbite are open source under the
+          MIT license, whereas Tailwind UI is a paid product. Another difference is that Flowbite
+          relies on smaller and standalone components, whereas Tailwind UI offers sections of pages.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          However, we actually recommend using both Flowbite, Flowbite Pro, and even Tailwind UI as
+          there is no technical reason stopping you from using the best of two worlds.
+        </p>
+        <p class="text-base font-normal text-gray-600 dark:text-gray-400">
+          Learn more about these technologies :
+        </p>
+        <ul class="text-base font-normal text-gray-600 dark:text-gray-400 list-disc list-inside">
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://flowbite.com/pro/">
+              Flowbite Pro
+            </a>
+          </li>
+          <li>
+            <a
+              class="text-base font-medium underline text-gray-600 dark:text-gray-400 decoration-primary-600 dark:decoration-primary-500"
+              href="https://tailwindui.com/"
+              rel="nofollow">
+              Tailwind UI
+            </a>
+          </li>
+        </ul>
+      </div>
+    </flowbite-accordion-content>
+  </flowbite-accordion-panel>
+</flowbite-accordion>
+
+<ng-template #no_arrow />
+<ng-template #question_mark_arrow>
+  <flowbite-icon
+    svgIcon="outline:question-circle"
+    class="h-6 w-6 shrink-0" />
+</ng-template>

apps/docs/docs/components/accordion/_arrow-style.component.ts

@@ -0,0 +1,23 @@
+import {
+  AccordionComponent,
+  AccordionContentComponent,
+  AccordionPanelComponent,
+  AccordionTitleComponent,
+} from 'flowbite-angular/accordion';
+import { IconComponent } from 'flowbite-angular/icon';
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'flowbite-demo-accordion-arrow-style',
+  standalone: true,
+  imports: [
+    AccordionComponent,
+    AccordionTitleComponent,
+    AccordionContentComponent,
+    AccordionPanelComponent,
+    IconComponent,
+  ],
+  templateUrl: './_arrow-style.component.html',
+})
+export class FlowbiteArrowStyleComponent {}

apps/docs/docs/components/accordion/index.md

@@ -49,3 +49,15 @@ keyword: AccordionPage
 ```angular-ts file="./_flush.component.ts"#L1-L6 group="flush" name="typescript"
 
 ```
+
+## Arrow style
+
+{{ NgDocActions.demo('flowbiteArrowStyleComponent', {container: false}) }}
+
+```angular-html file="./_arrow-style.component.html" group="arrow-style" name="html"
+
+```
+
+```angular-ts file="./_arrow-style.component.ts"#L1-L7 group="arrow-style" name="typescript"
+
+```

apps/docs/docs/components/accordion/ng-doc.page.ts

@@ -1,5 +1,6 @@
 import ComponentCategory from '../ng-doc.category';
 import { FlowbiteAlwaysOpenComponent } from './_always-open.component';
+import { FlowbiteArrowStyleComponent } from './_arrow-style.component';
 import { FlowbiteColorOptionComponent } from './_color-option.component';
 import { FlowbiteDefaultComponent } from './_default.component';
 import { FlowbiteFlushComponent } from './_flush.component';
@@ -21,6 +22,7 @@ const Accordion: NgDocPage = {
     flowbiteAlwaysOpenComponent: FlowbiteAlwaysOpenComponent,
     flowbiteColorOptionComponent: FlowbiteColorOptionComponent,
     flowbiteFlushComponent: FlowbiteFlushComponent,
+    flowbiteArrowStyleComponent: FlowbiteArrowStyleComponent,
   },
 };
 

libs/flowbite-angular/accordion/accordion-title.component.ts

@@ -8,7 +8,8 @@ import type { DeepPartial } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CHEVRON_DOWN_SVG_ICON } from 'flowbite-angular/utils';
 
-import type { OnInit } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import type { OnInit, TemplateRef } from '@angular/core';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -20,11 +21,19 @@ import {
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
+export const FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE = new InjectionToken<
+  TemplateRef<unknown> | undefined
+>('FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE');
+
 export const FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
   DeepPartial<AccordionTitleTheme>
 >('FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE');
 
 export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([
+  {
+    provide: FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE,
+    useValue: undefined,
+  },
   {
     provide: FLOWBITE_ACCORDION_TITLE_CUSTOM_STYLE_DEFAULT_VALUE,
     useValue: {},
@@ -36,16 +45,20 @@ export const accordionTitleDefaultValueProvider = makeEnvironmentProviders([
  */
 @Component({
   standalone: true,
-  imports: [IconComponent],
+  imports: [IconComponent, NgTemplateOutlet],
   selector: 'flowbite-accordion-title',
   template: `
     <h2 [class]="contentClasses().textClass">
       <ng-content />
     </h2>
-    <flowbite-icon
-      svgIcon="flowbite-angular:chevron-down"
-      class="h-6 w-6 shrink-0 duration-200"
-      [class.rotate-180]="accordionPanelComponent.isOpen()" />
+    @if (icon()) {
+      <ng-container [ngTemplateOutlet]="icon()!" />
+    } @else {
+      <flowbite-icon
+        svgIcon="flowbite-angular:chevron-down"
+        class="h-6 w-6 shrink-0 duration-300"
+        [class.rotate-180]="accordionPanelComponent.isOpen()" />
+    }
   `,
   host: {
     '(click)': 'onClick()',
@@ -78,6 +91,12 @@ export class AccordionTitleComponent extends BaseComponent<AccordionTitleClass>
    * @default `AccordionPanelComponents`'s color
    */
   public color = model<keyof AccordionColors>(this.accordionPanelComponent.color());
+  /**
+   * Set the accordion title icon
+   *
+   * @default undefined
+   */
+  public icon = model(inject(FLOWBITE_ACCORDION_TITLE_ICON_DEFAULT_VALUE));
   /**
    * Set the custom style for this accordion title
    */