diff --git a/libs/angular/src/tools/achievements/achievement-notifier.service.ts b/libs/angular/src/tools/achievements/achievement-notifier.service.ts
index 652d3614f6e..b00addfb42a 100644
--- a/libs/angular/src/tools/achievements/achievement-notifier.service.ts
+++ b/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,
});
});
diff --git a/libs/components/src/toast/toast.component.html b/libs/components/src/toast/toast.component.html
index bdbc9674184..113e3b2f83e 100644
--- a/libs/components/src/toast/toast.component.html
+++ b/libs/components/src/toast/toast.component.html
@@ -5,7 +5,11 @@
[attr.role]="variant === 'error' ? 'alert' : null"
>
-
+ @if (isIcon(icon)) {
+
+ } @else {
+
+ }
{{ variant | i18n }}
@if (title) {
diff --git a/libs/components/src/toast/toast.component.ts b/libs/components/src/toast/toast.component.ts
index bbf0291f180..9a7e2516973 100644
--- a/libs/components/src/toast/toast.component.ts
+++ b/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 = {
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();
+ /**
+ * 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;
}
diff --git a/libs/components/src/toast/toast.service.ts b/libs/components/src/toast/toast.service.ts
index 00c32f9b1b3..0af029cfea1 100644
--- a/libs/components/src/toast/toast.service.ts
+++ b/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;
+} & Pick;
/**
* 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
diff --git a/libs/components/src/toast/toastr.component.ts b/libs/components/src/toast/toastr.component.ts
index 75124ceb4b3..c348db380b7 100644
--- a/libs/components/src/toast/toastr.component.ts
+++ b/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()"
>