From cccfa415573f3aa53b0b828ba7f5c89cc7be6edb Mon Sep 17 00:00:00 2001
From: Lone Iversen <108085781+loivsen@users.noreply.github.com>
Date: Tue, 16 Jul 2024 11:03:07 +0200
Subject: [PATCH] better naming

---
 .../packages/core/components/icon/icon.element.ts   | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
index bb9acffbd1..d41dd58d81 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/core/components/icon/icon.element.ts
@@ -20,7 +20,8 @@ export class UmbIconElement extends UmbLitElement {
 	private _fallbackColor?: string;
 
 	/**
-	 * Override the icon color.
+	 * Color alias or a color code directly.\
+	 * If a color has been set via the name property, this property will override it.
 	 * */
 	@property({ type: String })
 	public set color(value: string) {
@@ -48,15 +49,15 @@ export class UmbIconElement extends UmbLitElement {
 	}
 
 	/**
-	 * The icon name. Can be appended with a color.
-	 * Example "icon-heart color-red"
+	 * The icon name. Can be appended with a color.\
+	 * Example **icon-heart color-red**
 	 */
 	@property({ type: String })
 	public set name(value: string | undefined) {
-		const [icon, alias] = value ? value.split(' ') : [];
+		const [icon, color] = value ? value.split(' ') : [];
 
-		if (alias) {
-			this.#setFallbackColorStyle(alias);
+		if (color) {
+			this.#setFallbackColorStyle(color);
 		} else {
 			this._color = undefined;
 		}