Extend toast component to receive an optional Icon

libs/angular/src/tools/achievements/achievement-notifier.service.ts

@@ -6,6 +6,7 @@ import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/pl
 import { AchievementService } from "@bitwarden/common/tools/achievements/achievement.service.abstraction";
 import { ToastService } from "@bitwarden/components";
 
+import { AchievementIcon } from "./achievement-icon";
 import { AchievementNotifierService as AchievementNotifierServiceAbstraction } from "./achievement-notifier.abstraction";
 
 export class AchievementNotifierService implements AchievementNotifierServiceAbstraction {
@@ -48,6 +49,7 @@ export class AchievementNotifierService implements AchievementNotifierServiceAbs
           variant: "info",
           title: achievement.name,
           message: achievement.description,
+          icon: AchievementIcon,
         });
       });
 

libs/components/src/toast/toast.component.html

@@ -5,7 +5,11 @@
   [attr.role]="variant === 'error' ? 'alert' : null"
 >
   <div class="tw-flex tw-items-center tw-gap-4 tw-px-2 tw-pb-1 tw-pt-2">
-    <i aria-hidden="true" class="bwi tw-text-xl tw-py-1.5 tw-px-2.5 {{ iconClass }}"></i>
+    @if (isIcon(icon)) {
+      <bit-icon class="tw-text-xl tw-py-1.5 tw-px-2.5" [icon]="icon"></bit-icon>
+    } @else {
+      <i aria-hidden="true" class="bwi tw-text-xl tw-py-1.5 tw-px-2.5 {{ iconClass }}"></i>
+    }
     <div>
       <span class="tw-sr-only">{{ variant | i18n }}</span>
       @if (title) {

libs/components/src/toast/toast.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, Output } from "@angular/core";
 
+import { Icon, IconModule, isIcon } from "../icon";
 import { IconButtonModule } from "../icon-button";
 import { SharedModule } from "../shared";
 import { TypographyModule } from "../typography";
@@ -29,7 +30,7 @@ const variants: Record<ToastVariant, { icon: string; bgColor: string }> = {
   selector: "bit-toast",
   templateUrl: "toast.component.html",
   standalone: true,
-  imports: [SharedModule, IconButtonModule, TypographyModule],
+  imports: [SharedModule, IconButtonModule, TypographyModule, IconModule],
 })
 export class ToastComponent {
   @Input() variant: ToastVariant = "info";
@@ -50,10 +51,26 @@ export class ToastComponent {
    **/
   @Input() progressWidth = 0;
 
+  /** An optional icon that overrides the existing variant definition
+   * string if you want to a use a font icon, or an Icon object if you want to use an SVG icon.
+   */
+  @Input() icon?: string | Icon;
+
   /** Emits when the user presses the close button */
   @Output() onClose = new EventEmitter<void>();
 
+  /**
+   * Checks if the provided icon is type of Icon and when that is true returns an Icon
+   */
+  protected isIcon(icon: unknown): icon is Icon {
+    return isIcon(icon);
+  }
+
   protected get iconClass(): string {
+    if (this.icon instanceof String) {
+      return this.icon as string;
+    }
+
     return variants[this.variant].icon;
   }
 

libs/components/src/toast/toast.service.ts

@@ -11,7 +11,7 @@ export type ToastOptions = {
    * The duration the toast will persist in milliseconds
    **/
   timeout?: number;
-} & Pick<ToastComponent, "message" | "variant" | "title">;
+} & Pick<ToastComponent, "message" | "variant" | "title" | "icon">;
 
 /**
  * Presents toast notifications
@@ -26,6 +26,7 @@ export class ToastService {
         message: options.message,
         variant: options.variant,
         title: options.title,
+        icon: options?.icon,
       },
       timeOut:
         options.timeout != null && options.timeout > 0

libs/components/src/toast/toastr.component.ts

@@ -10,6 +10,7 @@ import { ToastComponent } from "./toast.component";
       [title]="options?.payload?.title"
       [variant]="options?.payload?.variant"
       [message]="options?.payload?.message"
+      [icon]="options?.payload?.icon"
       [progressWidth]="width()"
       (onClose)="remove()"
     ></bit-toast>