From a781621f7f6476297194857032ec4e34e2a39562 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Sun, 21 Dec 2025 18:29:10 +0530
Subject: [PATCH 1/2] feat: Enhance `addIcon` to support svg currentColor

---
 src/lib/acode.js | 44 ++++++++++++++++++++++++++++++++++++++------
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/src/lib/acode.js b/src/lib/acode.js
index 02ea35172..bd6616543 100644
--- a/src/lib/acode.js
+++ b/src/lib/acode.js
@@ -629,14 +629,46 @@ export default class Acode {
 		return Url.join(...args);
 	}
 
-	addIcon(className, src) {
+	/**
+	 * Adds a custom icon class that can be used with the .icon element
+	 * @param {string} className - The class name for the icon (used as .icon.className)
+	 * @param {string} src - URL or data URI of the icon image
+	 * @param {object} [options] - Optional settings
+	 * @param {boolean} [options.monochrome=false] - If true, icon will use currentColor and adapt to theme
+	 */
+	addIcon(className, src, options = {}) {
 		let style = document.head.get(`style[icon="${className}"]`);
 		if (!style) {
-			style = (
-				<style
-					icon={className}
-				>{`.icon.${className}{background-image: url(${src})}`}</style>
-			);
+			let css;
+			if (options.monochrome) {
+				// Monochrome icons: use mask-image (on ::before) for currentColor/theme support
+				// Using ::before ensures we don't mask the ::after active indicator or the background
+				css = `.icon.${className}::before {
+					content: '';
+					display: inline-block;
+					width: 24px;
+					height: 24px;
+					vertical-align: middle;
+					-webkit-mask-image: url(${src});
+					mask-image: url(${src});
+					-webkit-mask-size: contain;
+					mask-size: contain;
+					-webkit-mask-repeat: no-repeat;
+					mask-repeat: no-repeat;
+					-webkit-mask-position: center;
+					mask-position: center;
+					background-color: currentColor;
+				}`;
+			} else {
+				// Default: preserve original icon colors
+				css = `.icon.${className}{
+					background-image: url(${src});
+					background-size: 24px;
+					background-repeat: no-repeat;
+					background-position: center;
+				}`;
+			}
+			style = <style icon={className}>{css}</style>;
 			document.head.appendChild(style);
 		}
 	}

From 13e28210fbf787aca6daea99578209ba1fce3cd4 Mon Sep 17 00:00:00 2001
From: Raunak Raj <71929976+bajrangCoder@users.noreply.github.com>
Date: Sun, 21 Dec 2025 18:37:58 +0530
Subject: [PATCH 2/2] chore: use shorthand properties.

---
 src/lib/acode.js | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/src/lib/acode.js b/src/lib/acode.js
index bd6616543..8783d6d24 100644
--- a/src/lib/acode.js
+++ b/src/lib/acode.js
@@ -649,23 +649,14 @@ export default class Acode {
 					width: 24px;
 					height: 24px;
 					vertical-align: middle;
-					-webkit-mask-image: url(${src});
-					mask-image: url(${src});
-					-webkit-mask-size: contain;
-					mask-size: contain;
-					-webkit-mask-repeat: no-repeat;
-					mask-repeat: no-repeat;
-					-webkit-mask-position: center;
-					mask-position: center;
+					-webkit-mask: url(${src}) no-repeat center / contain;
+					mask: url(${src}) no-repeat center / contain;
 					background-color: currentColor;
 				}`;
 			} else {
 				// Default: preserve original icon colors
 				css = `.icon.${className}{
-					background-image: url(${src});
-					background-size: 24px;
-					background-repeat: no-repeat;
-					background-position: center;
+					background: url(${src}) no-repeat center / 24px;
 				}`;
 			}
 			style = <style icon={className}>{css}</style>;