From 1e15b5f98c42a33801b6139f1ce2b338d9bb7f5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oskari=20V=C3=A4ist=C3=B6?= <oskari.vaisto@csc.fi>
Date: Wed, 20 Dec 2023 12:04:19 +0100
Subject: [PATCH] fix: c-icon - make c-icon render correctly inside c-option

---
 packages/csc-ui/src/components/c-icon/c-icon.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/csc-ui/src/components/c-icon/c-icon.tsx b/packages/csc-ui/src/components/c-icon/c-icon.tsx
index b6c6601c..9f40f301 100644
--- a/packages/csc-ui/src/components/c-icon/c-icon.tsx
+++ b/packages/csc-ui/src/components/c-icon/c-icon.tsx
@@ -26,6 +26,13 @@ export class CIcon {
    */
   @Prop() color = 'currentColor';
 
+  private _pathElement: SVGElement;
+
+  componentDidLoad() {
+    // workaround to make the icon work as a c-option child
+    this._pathElement.setAttribute('d', this.host.dataset.path);
+  }
+
   render() {
     return (
       <Host
@@ -33,9 +40,10 @@ export class CIcon {
           '--_c-icon-size': `${this.size}px`,
           '--_c-icon-default-color': this.color,
         }}
+        data-path={this.path}
       >
         <svg viewBox="0 0 24 24">
-          <path d={this.path} />
+          <path ref={(el) => (this._pathElement = el)} />
         </svg>
       </Host>
     );