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

## PR Checklist

Please check if your PR fulfills the following requirements:

<!--- [ ] Tests for the changes have been added (for bug
fixes/features)-->

- [ ] Docs have been added/updated (for bug fixes/features)

## PR Type

What kind of change does this PR introduce?

<!-- Please check the one that applies to this PR using "x". -->

- [ ] Bugfix
- [x] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no API changes)
- [ ] Build related changes
- [ ] CI-related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## Issue Number

<!-- Bugs and features must be linked to an issue. -->

Issue Number: #85 

## Does this PR introduce a breaking change?

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

- [ ] Yes
- [x] No

## Other information

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
	- Added support for dynamic icons in the scroll-to-top feature.

- **Bug Fixes**
- Ensured that existing functionality and layout remain unaffected by
the new component integration.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

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,8 +108,16 @@ 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
+   *
+   * @default undefined
+   */
+  public icon = model(inject(FLOWBITE_SCROLL_TOP_ICON_DEFAULT_VALUE));
   /**
    * Set the custom style for this scroll top
+   *
+   * @default {}
    */
   public customStyle = model(inject(FLOWBITE_SCROLL_TOP_CUSTOM_STYLE_DEFAULT_VALUE));
   //#endregion