diff --git a/packages/main/src/Avatar.hbs b/packages/main/src/Avatar.hbs
index b59d1838ba2c..970f2b5e3b4d 100644
--- a/packages/main/src/Avatar.hbs
+++ b/packages/main/src/Avatar.hbs
@@ -10,6 +10,7 @@
role="{{_role}}"
aria-haspopup="{{_ariaHasPopup}}"
aria-label="{{accessibleNameText}}"
+ fallback-icon="{{_fallbackIcon}}"
>
{{#if hasImage}}
@@ -20,7 +21,7 @@
{{#if initials}}
{{validInitials}}
-
+
{{/if}}
{{/if}}
diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts
index 59d7d786f922..0cabfd4906da 100644
--- a/packages/main/src/Avatar.ts
+++ b/packages/main/src/Avatar.ts
@@ -26,6 +26,7 @@ import AvatarColorScheme from "./types/AvatarColorScheme.js";
// Icon
import "@ui5/webcomponents-icons/dist/employee.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
/**
* @class
@@ -139,6 +140,33 @@ class Avatar extends UI5Element implements ITabbable {
@property()
icon!: string;
+ /**
+ * Defines the name of the fallback icon, which should be displayed in the following cases:
+ *
+ * - If the initials are not valid (more than 3 letters, unsupported languages or empty initials).
+ * - If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).
+ * - If the image src is wrong.
+ *
+ *
+ *
+ * Note: If not set, a default fallback icon "employee" is displayed.
+ *
+ * Note: You should import the desired icon first, then use its name as "fallback-icon".
+ *
+ * import "@ui5/webcomponents-icons/dist/{icon_name}.js"
+ *
+ * <ui5-avatar fallback-icon="alert">
+ *
+ *
+ * See all the available icons in the Icon Explorer.
+ * @type {string}
+ * @name sap.ui.webc.main.Avatar.prototype.fallbackIcon
+ * @defaultvalue ""
+ * @public
+ */
+ @property()
+ fallbackIcon!: string;
+
/**
* Defines the displayed initials.
*
@@ -350,6 +378,14 @@ class Avatar extends UI5Element implements ITabbable {
return this._getAriaHasPopup();
}
+ get _fallbackIcon() {
+ if (this.fallbackIcon === "") {
+ this.fallbackIcon = "employee";
+ }
+
+ return this.fallbackIcon;
+ }
+
get _interactive() {
return this.interactive && !this.disabled;
}
diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html
index d73d339e6519..7e77ebf9a962 100644
--- a/packages/main/test/pages/Avatar.html
+++ b/packages/main/test/pages/Avatar.html
@@ -149,6 +149,8 @@ Avatar - test
+
+
@@ -267,9 +269,11 @@ Avatar with three initials
- Avatar with three overflowing initials - icon should be shown
+ Avatar with three overflowing initials - default fallback icon should be shown
-
+
+ Avatar with three overflowing initials - custom fallback icon should be shown
+
diff --git a/packages/main/test/specs/Avatar.spec.js b/packages/main/test/specs/Avatar.spec.js
index dde3baeb6da0..859b0cbc0a41 100644
--- a/packages/main/test/specs/Avatar.spec.js
+++ b/packages/main/test/specs/Avatar.spec.js
@@ -53,12 +53,26 @@ describe("Avatar", () => {
assert.ok(await initials.isExisting(), "initials are rendered");
});
- it("tests rendering of icon when initials are overflowing ", async () => {
+ it("tests rendering of default fallback icon when initials are overflowing ", async () => {
const avatar = await browser.$("#myAvatar5");
const icon = await avatar.shadow$(".ui5-avatar-icon");
+ const iconName = await icon.getAttribute("name");
// icon is rendered
assert.ok(await icon.isExisting(), "icon should be rendered, when the initials are overflowing");
+ assert.strictEqual(await iconName, "employee", "the default fallback icon is renderen");
+
+ });
+
+ it("tests rendering of custom fallback icon when initials are overflowing ", async () => {
+ const avatar = await browser.$("#myAvatar7");
+ const fbIcon = await avatar.shadow$(".ui5-avatar-icon-fallback");
+ const fbIconName = await fbIcon.getAttribute("name");
+
+ // icon is rendered
+ assert.ok(await fbIcon.isExisting(), "fallback icon should be rendered, when it is set and the initials are overflowing");
+ assert.strictEqual(await fbIconName, "alert", "the custom fallback icon is renderen");
+
});
it("tests clicking on interactive disabled avatar", async () => {