feat(scroll-top): add support for icon customisation

Author: MGREMY

apps/docs/src/app/app.component.html

@@ -113,6 +113,7 @@
 
   <div class="mt-2">
     <router-outlet />
+    <flowbite-scroll-top />
   </div>
 
   <ng-template #footerContent>

apps/docs/src/app/app.component.ts

@@ -14,6 +14,7 @@ import {
 } from 'flowbite-angular/navbar';
 import { FlowbiteRouterLinkDirective } from 'flowbite-angular/router-link';
 import { FlowbiteRouterLinkActiveDirective } from 'flowbite-angular/router-link-active';
+import { ScrollTopComponent } from 'flowbite-angular/scroll-top';
 
 import { Location } from '@angular/common';
 import { Component, computed, inject } from '@angular/core';
@@ -44,6 +45,7 @@ import {
     FlowbiteRouterLinkDirective,
     FlowbiteRouterLinkActiveDirective,
     BadgeComponent,
+    ScrollTopComponent,
   ],
   selector: 'flowbite-root',
   templateUrl: './app.component.html',

libs/flowbite-angular/scroll-top/scroll-top.component.ts

@@ -11,7 +11,8 @@ import { BaseComponent } from 'flowbite-angular';
 import { IconComponent, IconRegistry } from 'flowbite-angular/icon';
 import { CHEVRON_UP_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,
@@ -31,6 +32,10 @@ export const FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE = new InjectionToken<
   keyof ScrollTopPositions
 >('FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE');
 
+export const FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE = new InjectionToken<
+  TemplateRef<unknown> | undefined
+>('FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE');
+
 export const FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE = new InjectionToken<
   DeepPartial<ScrollTopTheme>
 >('FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE');
@@ -44,6 +49,10 @@ export const scrollTopDefaultValueProvider = makeEnvironmentProviders([
     provide: FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE,
     useValue: 'bottom-right',
   },
+  {
+    provide: FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE,
+    useValue: undefined,
+  },
   {
     provide: FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE,
     useValue: {},
@@ -56,10 +65,16 @@ export const scrollTopDefaultValueProvider = makeEnvironmentProviders([
 @Component({
   selector: 'flowbite-scroll-top',
   standalone: true,
-  imports: [IconComponent],
-  template: `<flowbite-icon
-    svgIcon="flowbite-angular:chevron-up"
-    class="w-5 h-5" />`,
+  imports: [IconComponent, NgTemplateOutlet],
+  template: `
+    @if (icon()) {
+      <ng-container [ngTemplateOutlet]="icon()!" />
+    } @else {
+      <flowbite-icon
+        svgIcon="flowbite-angular:chevron-up"
+        class="w-5 h-5" />
+    }
+  `,
   host: {
     '(click)': 'onClick()',
   },
@@ -93,6 +108,10 @@ export class ScrollTopComponent extends BaseComponent<ScrollTopClass> implements
    * @default bottom-right
    */
   public position = model(inject(FLOWBITE_SCROLL_TOP_POSITION_DEFAULT_VALUE));
+  /**
+   * Set the scroll top icon
+   */
+  public icon = model(inject(FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE));
   /**
    * Set the custom style for this scroll top
    */