Fix Icon Inconsistent colors and class names

Partial fix for #1889
trimble-oss · Dec 12, 2023 · 402580c · 402580c
1 parent 5598180
commit 402580c
Show file tree

Hide file tree

Showing 60 changed files with 139 additions and 217 deletions.
diff --git a/stencil-workspace/src/components/icons/icon-accessibility-circle.tsx b/stencil-workspace/src/components/icons/icon-accessibility-circle.tsx
@@ -9,7 +9,7 @@ export const IconAccessibilityCircle: FunctionalComponent<IconProps> = (props: I
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill={props.color ?? '#6A6976'}
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.53 2 12 2Zm0 2.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5Zm6 5.25h-3.75v9c0 .41-.34.75-.75.75s-.75-.34-.75-.75V15h-1.5v3.75c0 .41-.34.75-.75.75s-.75-.34-.75-.75v-9H6c-.41 0-.75-.34-.75-.75s.34-.75.75-.75h12c.41 0 .75.34.75.75s-.34.75-.75.75Z" />
   </svg>

diff --git a/stencil-workspace/src/components/icons/icon-add.tsx b/stencil-workspace/src/components/icons/icon-add.tsx
@@ -9,8 +9,8 @@ export const IconAdd: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M19,13H13v6H11V13H5V11h6V5h2v6h6Z" fill={props.color ?? '#6A6976'} />
+    <path d="M19,13H13v6H11V13H5V11h6V5h2v6h6Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-apps.tsx b/stencil-workspace/src/components/icons/icon-apps.tsx
@@ -15,11 +15,8 @@ export const IconApps: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M4 8H8V4H4V8ZM10 20H14V16H10V20ZM4 20H8V16H4V20ZM4 14H8V10H4V14ZM10 14H14V10H10V14ZM16 4V8H20V4H16ZM10 8H14V4H10V8ZM16 14H20V10H16V14ZM16 20H20V16H16V20Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M4 8H8V4H4V8ZM10 20H14V16H10V20ZM4 20H8V16H4V20ZM4 14H8V10H4V14ZM10 14H14V10H10V14ZM16 4V8H20V4H16ZM10 8H14V4H10V8ZM16 14H20V10H16V14ZM16 20H20V16H16V20Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-arrow-down.tsx b/stencil-workspace/src/components/icons/icon-arrow-down.tsx
@@ -12,13 +12,12 @@ interface IconProps {
 export const IconArrowDown: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-arrow-down"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    data-test-id="iconArrowDown"
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M15 12h3.79c.45 0 .67.54.35.85l-6.44 6.44a.996.996 0 0 1-1.41 0l-6.44-6.44A.5.5 0 0 1 5.2 12h3.79V5c0-.55.45-1 1-1h4c.55 0 1 .45 1 1v7Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-arrow-up.tsx b/stencil-workspace/src/components/icons/icon-arrow-up.tsx
@@ -12,13 +12,12 @@ interface IconProps {
 export const IconArrowUp: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-arrow-up"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    data-test-id="iconArrowUp"
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M14 20h-4c-.55 0-1-.45-1-1v-7H5.21c-.45 0-.67-.54-.35-.85l6.44-6.44a.996.996 0 0 1 1.41 0l6.44 6.44a.5.5 0 0 1-.35.85h-3.79v7c0 .55-.45 1-1 1Z" />{' '}
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-calendar.tsx b/stencil-workspace/src/components/icons/icon-calendar.tsx
@@ -15,11 +15,8 @@ export const IconCalendar: FunctionalComponent<IconProps> = (props: IconProps) =
     width={props.size ?? 16}
     onClick={props.onClick ? (event) => props.onClick(event) : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      fill={props.color ?? 'currentColor'}
-      d="M13.5 11h-3v3h3v-3Zm4.5 0h-3v3h3v-3Zm2-8h-2c0-.55-.45-1-1-1s-1 .45-1 1H8c0-.55-.45-1-1-1s-1 .45-1 1H4c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 17H4V9.97h16V20Zm0-12.03H4V5h2v1c0 .55.45 1 1 1s1-.45 1-1V5h8v1c0 .55.45 1 1 1s1-.45 1-1V5h2v2.97ZM9 11H6v3h3v-3Z"
-    />
+    <path d="M13.5 11h-3v3h3v-3Zm4.5 0h-3v3h3v-3Zm2-8h-2c0-.55-.45-1-1-1s-1 .45-1 1H8c0-.55-.45-1-1-1s-1 .45-1 1H4c-1.1 0-2 .9-2 2v15c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 17H4V9.97h16V20Zm0-12.03H4V5h2v1c0 .55.45 1 1 1s1-.45 1-1V5h8v1c0 .55.45 1 1 1s1-.45 1-1V5h2v2.97ZM9 11H6v3h3v-3Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-cancel.tsx b/stencil-workspace/src/components/icons/icon-cancel.tsx
@@ -9,18 +9,14 @@ interface IconProps {
 
 export const IconCancel: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width={props.size ?? 16}
-    height={props.size ?? 16}
+    class="icon-cancel"
     fill={props.color ?? 'currentColor'}
-    class="modus-icon"
+    height={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 32 32">
-    <g>
-      <g>
-        <path d="M21.3027,10.6973a1.503,1.503,0,0,0-2.1211,0L16,13.8789l-3.1821-3.1816a1.5,1.5,0,0,0-2.1211,2.1211L13.8789,16l-3.1821,3.1816a1.5012,1.5012,0,0,0,0,2.1211,1.5363,1.5363,0,0,0,2.1211,0L16,18.1211l3.1816,3.1816a1.5,1.5,0,1,0,2.1211-2.1211L18.1211,16l3.1816-3.1816A1.5012,1.5012,0,0,0,21.3027,10.6973Z" />
-        <path d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12.0134,12.0134,0,0,1,16,28Z" />
-      </g>
-    </g>
+    viewBox="0 0 32 32"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M21.3027,10.6973a1.503,1.503,0,0,0-2.1211,0L16,13.8789l-3.1821-3.1816a1.5,1.5,0,0,0-2.1211,2.1211L13.8789,16l-3.1821,3.1816a1.5012,1.5012,0,0,0,0,2.1211,1.5363,1.5363,0,0,0,2.1211,0L16,18.1211l3.1816,3.1816a1.5,1.5,0,1,0,2.1211-2.1211L18.1211,16l3.1816-3.1816A1.5012,1.5012,0,0,0,21.3027,10.6973Z" />
+    <path d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2Zm0,26A12,12,0,1,1,28,16,12.0134,12.0134,0,0,1,16,28Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-caret-down.tsx b/stencil-workspace/src/components/icons/icon-caret-down.tsx
@@ -10,12 +10,12 @@ interface IconProps {
 export const IconCaretDown: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-caret-down"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="m12.6 14.74 4.22-4.58c.43-.46.06-1.16-.6-1.16H7.78c-.66 0-1.03.7-.6 1.16l4.22 4.58c.31.34.89.34 1.2 0Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-caret-up.tsx b/stencil-workspace/src/components/icons/icon-caret-up.tsx
@@ -10,12 +10,12 @@ interface IconProps {
 export const IconCaretUp: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
     class="icon-caret-up"
-    xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="m11.4 9.26-4.22 4.58c-.43.46-.06 1.16.6 1.16h8.43c.66 0 1.03-.7.6-1.16l-4.22-4.58a.833.833 0 0 0-1.2 0Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-check-circle-outline.tsx b/stencil-workspace/src/components/icons/icon-check-circle-outline.tsx
@@ -14,11 +14,8 @@ export const IconCheckCircleOutline: FunctionalComponent<IconProps> = (props: Ic
     width={props.size ?? 16}
     onClick={() => props.onClick()}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20C7.6 20 4 16.4 4 12C4 7.6 7.6 4 12 4ZM12 18.36C15.531 18.36 18.4 15.4343 18.4 11.9234C18.4 8.41257 15.531 5.56 12 5.56C8.46897 5.56 5.6 8.48571 5.6 11.9966C5.6 15.5074 8.46897 18.36 12 18.36ZM15.44 10.4L11.28 14.56C11.12 14.72 10.96 14.72 10.8 14.72C10.64 14.72 10.48 14.64 10.32 14.56L8.48 12.72C8.24 12.48 8.24 12.08 8.48 11.84C8.72 11.6 9.12 11.6 9.36 11.84L10.72 13.2L14.48 9.44C14.72 9.2 15.12 9.2 15.36 9.44C15.68 9.68 15.68 10.08 15.44 10.4Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M12 4C16.4 4 20 7.6 20 12C20 16.4 16.4 20 12 20C7.6 20 4 16.4 4 12C4 7.6 7.6 4 12 4ZM12 18.36C15.531 18.36 18.4 15.4343 18.4 11.9234C18.4 8.41257 15.531 5.56 12 5.56C8.46897 5.56 5.6 8.48571 5.6 11.9966C5.6 15.5074 8.46897 18.36 12 18.36ZM15.44 10.4L11.28 14.56C11.12 14.72 10.96 14.72 10.8 14.72C10.64 14.72 10.48 14.64 10.32 14.56L8.48 12.72C8.24 12.48 8.24 12.08 8.48 11.84C8.72 11.6 9.12 11.6 9.36 11.84L10.72 13.2L14.48 9.44C14.72 9.2 15.12 9.2 15.36 9.44C15.68 9.68 15.68 10.08 15.44 10.4Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-check-circle.tsx b/stencil-workspace/src/components/icons/icon-check-circle.tsx
@@ -14,11 +14,8 @@ export const IconCheckCircle: FunctionalComponent<IconProps> = (props: IconProps
     width={props.size ?? 16}
     onClick={() => props.onClick()}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M12 4C7.584 4 4 7.584 4 12C4 16.416 7.584 20 12 20C16.416 20 20 16.416 20 12C20 7.584 16.416 4 12 4ZM10.4 16L6.4 12L7.528 10.872L10.4 13.736L16.472 7.664L17.6 8.8L10.4 16Z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M12 4C7.584 4 4 7.584 4 12C4 16.416 7.584 20 12 20C16.416 20 20 16.416 20 12C20 7.584 16.416 4 12 4ZM10.4 16L6.4 12L7.528 10.872L10.4 13.736L16.472 7.664L17.6 8.8L10.4 16Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-check.tsx b/stencil-workspace/src/components/icons/icon-check.tsx
@@ -14,13 +14,12 @@ export const IconCheck: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick ? () => props.onClick() : null}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M9.08471 15.4676L5.29164 11.736L4 12.9978L9.08471 18L20 7.26174L18.7175 6L9.08471 15.4676Z"
-      fill={props.color ?? '#6A6976'}
     />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-chevron-double-down.tsx b/stencil-workspace/src/components/icons/icon-chevron-double-down.tsx
@@ -4,7 +4,7 @@ import { IconProps } from './IconMap';
 
 export const IconChevronDoubleDown: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="mi-outline mi-chevron-double-down"
+    class="icon-chevron-double-down"
     xmlns="http://www.w3.org/2000/svg"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}

diff --git a/stencil-workspace/src/components/icons/icon-chevron-double-up.tsx b/stencil-workspace/src/components/icons/icon-chevron-double-up.tsx
@@ -4,13 +4,13 @@ import { IconProps } from './IconMap';
 
 export const IconChevronDoubleUp: FunctionalComponent<IconProps> = (props: IconProps) => (
   <svg
-    class="mi-outline mi-chevron-double-up"
-    xmlns="http://www.w3.org/2000/svg"
+    class="icon-chevron-double-up"
     fill={props.color ?? 'currentColor'}
     height={props.size ?? 16}
-    width={props.size ?? 16}
     onClick={props.onClick}
-    viewBox="0 0 24 24">
+    viewBox="0 0 24 24"
+    width={props.size ?? 16}
+    xmlns="http://www.w3.org/2000/svg">
     <path d="M8.11 11.7 12 7.83l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 5.71a.996.996 0 0 0-1.41 0L6.7 10.29a.996.996 0 1 0 1.41 1.41Zm4.59.6a.996.996 0 0 0-1.41 0L6.7 16.88a.996.996 0 1 0 1.41 1.41L12 14.42l3.88 3.88a.996.996 0 1 0 1.41-1.41L12.7 12.3Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-chevron-left-thick.tsx b/stencil-workspace/src/components/icons/icon-chevron-left-thick.tsx
@@ -13,11 +13,8 @@ export const IconChevronLeftThick: FunctionalComponent<IconProps> = (props: Icon
     height={props.size ?? 16}
     width={props.size ?? 16}
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
+    fill={props.color ?? 'currentColor'}
     viewBox="0 0 32 32">
-    <path
-      d="M21.753 28.06A2.483 2.483 0 0 0 22.864 26c0-.523-.165-1.024-.476-1.45l-.026-.035-.028-.032L14.941 16l7.393-8.483.028-.032.026-.035c.311-.426.476-.927.476-1.45 0-.823-.415-1.593-1.112-2.06-1.135-.76-2.704-.501-3.519.574l-8.572 9.974-.026.03-.024.032a2.445 2.445 0 0 0 0 2.9l.024.032.026.03 8.572 9.974c.816 1.075 2.384 1.335 3.52.574z"
-      fill={props.color ?? '#6A6976'}
-    />
+    <path d="M21.753 28.06A2.483 2.483 0 0 0 22.864 26c0-.523-.165-1.024-.476-1.45l-.026-.035-.028-.032L14.941 16l7.393-8.483.028-.032.026-.035c.311-.426.476-.927.476-1.45 0-.823-.415-1.593-1.112-2.06-1.135-.76-2.704-.501-3.519.574l-8.572 9.974-.026.03-.024.032a2.445 2.445 0 0 0 0 2.9l.024.032.026.03 8.572 9.974c.816 1.075 2.384 1.335 3.52.574z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-chevron-right-thick.tsx b/stencil-workspace/src/components/icons/icon-chevron-right-thick.tsx
@@ -16,11 +16,6 @@ export const IconChevronRightThick: FunctionalComponent<IconProps> = (props: Ico
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 32 32">
-    <g>
-      <path
-        d="m13.767 27.486 8.572-9.974.026-.03.023-.032a2.444 2.444 0 0 0 0-2.9l-.023-.032-.026-.03-8.572-9.974c-.815-1.075-2.384-1.335-3.52-.574A2.482 2.482 0 0 0 9.136 6c0 .523.164 1.024.476 1.45l.025.035.028.032L17.058 16l-7.392 8.483-.028.032-.026.034A2.442 2.442 0 0 0 9.136 26c0 .823.415 1.594 1.111 2.06 1.136.762 2.704.502 3.52-.573z"
-        fill={props.color ?? '#6A6976'}
-      />
-    </g>
+    <path d="m13.767 27.486 8.572-9.974.026-.03.023-.032a2.444 2.444 0 0 0 0-2.9l-.023-.032-.026-.03-8.572-9.974c-.815-1.075-2.384-1.335-3.52-.574A2.482 2.482 0 0 0 9.136 6c0 .523.164 1.024.476 1.45l.025.035.028.032L17.058 16l-7.392 8.483-.028.032-.026.034A2.442 2.442 0 0 0 9.136 26c0 .823.415 1.594 1.111 2.06 1.136.762 2.704.502 3.52-.573z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-close.tsx b/stencil-workspace/src/components/icons/icon-close.tsx
@@ -20,7 +20,7 @@ export const IconClose: FunctionalComponent<IconProps> = (props: IconProps) => (
     <g clip-path="url(#clip0)">
       <path
         d="M19 7.30929L17.6907 6L12.5 11.1907L7.30929 6L6 7.30929L11.1907 12.5L6 17.6907L7.30929 19L12.5 13.8093L17.6907 19L19 17.6907L13.8093 12.5L19 7.30929Z"
-        fill={props.color ?? '#6A6976'}
+        fill={props.color ?? 'currentColor'}
       />
     </g>
     <defs>

diff --git a/stencil-workspace/src/components/icons/icon-collapse-all.tsx b/stencil-workspace/src/components/icons/icon-collapse-all.tsx
@@ -9,12 +9,8 @@ export const IconCollapseAll: FunctionalComponent<IconProps> = (props: IconProps
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0,0H24V24H0Z" fill="none" />
-    <path
-      d="M7.41,18.59,8.83,20,12,16.83,15.17,20l1.41-1.41L12,14ZM16.59,5.41,15.17,4,12,7.17,8.83,4,7.41,5.41,12,10Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M7.41,18.59,8.83,20,12,16.83,15.17,20l1.41-1.41L12,14ZM16.59,5.41,15.17,4,12,7.17,8.83,4,7.41,5.41,12,10Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-copy.tsx b/stencil-workspace/src/components/icons/icon-copy.tsx
@@ -9,12 +9,8 @@ export const IconCopy: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0,0H24V24H0Z" fill="none" />
-    <path
-      d="M16,1H4A2.006,2.006,0,0,0,2,3V17H4V3H16Zm3,4H8A2.006,2.006,0,0,0,6,7V21a2.006,2.006,0,0,0,2,2H19a2.006,2.006,0,0,0,2-2V7A2.006,2.006,0,0,0,19,5Zm0,16H8V7H19Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M16,1H4A2.006,2.006,0,0,0,2,3V17H4V3H16Zm3,4H8A2.006,2.006,0,0,0,6,7V21a2.006,2.006,0,0,0,2,2H19a2.006,2.006,0,0,0,2-2V7A2.006,2.006,0,0,0,19,5Zm0,16H8V7H19Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-drag-handle.tsx b/stencil-workspace/src/components/icons/icon-drag-handle.tsx
@@ -21,13 +21,11 @@ export const IconDragHandle: FunctionalComponent<IconProps> = (props: IconProps)
       <g transform="translate(-617.000000, -246.000000)">
         <g transform="translate(100.000000, 100.000000)">
           <g transform="translate(510.000000, 142.000000)">
-            <g>
-              <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
-              <path
-                d="M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z"
-                id="🔹-Icon-Color"
-                fill={props.color ?? '#6A6976'}></path>
-            </g>
+            <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
+            <path
+              d="M11,18 C11,19.1 10.1,20 9,20 C7.9,20 7,19.1 7,18 C7,16.9 7.9,16 9,16 C10.1,16 11,16.9 11,18 Z M9,10 C7.9,10 7,10.9 7,12 C7,13.1 7.9,14 9,14 C10.1,14 11,13.1 11,12 C11,10.9 10.1,10 9,10 Z M9,4 C7.9,4 7,4.9 7,6 C7,7.1 7.9,8 9,8 C10.1,8 11,7.1 11,6 C11,4.9 10.1,4 9,4 Z M15,8 C16.1,8 17,7.1 17,6 C17,4.9 16.1,4 15,4 C13.9,4 13,4.9 13,6 C13,7.1 13.9,8 15,8 Z M15,10 C13.9,10 13,10.9 13,12 C13,13.1 13.9,14 15,14 C16.1,14 17,13.1 17,12 C17,10.9 16.1,10 15,10 Z M15,16 C13.9,16 13,16.9 13,18 C13,19.1 13.9,20 15,20 C16.1,20 17,19.1 17,18 C17,16.9 16.1,16 15,16 Z"
+              id="🔹-Icon-Color"
+              fill={props.color ?? 'currentColor'}></path>
           </g>
         </g>
       </g>

diff --git a/stencil-workspace/src/components/icons/icon-drag.tsx b/stencil-workspace/src/components/icons/icon-drag.tsx
@@ -9,11 +9,8 @@ export const IconDrag: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path
-      d="M11,18a2,2,0,1,1-2-2A2.006,2.006,0,0,1,11,18ZM9,10a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,10ZM9,4a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,4Zm6,4a2,2,0,1,0-2-2A2.006,2.006,0,0,0,15,8Zm0,2a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,10Zm0,6a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,16Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M11,18a2,2,0,1,1-2-2A2.006,2.006,0,0,1,11,18ZM9,10a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,10ZM9,4a2,2,0,1,0,2,2A2.006,2.006,0,0,0,9,4Zm6,4a2,2,0,1,0-2-2A2.006,2.006,0,0,0,15,8Zm0,2a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,10Zm0,6a2,2,0,1,0,2,2A2.006,2.006,0,0,0,15,16Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-edit.tsx b/stencil-workspace/src/components/icons/icon-edit.tsx
@@ -9,12 +9,9 @@ export const IconEdit: FunctionalComponent<IconProps> = (props: IconProps) => (
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
     <path d="M0,0H24V24H0Z" fill="none" />
-    <path
-      d="M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M3,17.25V21H6.75L17.81,9.94,14.06,6.19ZM20.71,7.04a1,1,0,0,0,0-1.41L18.37,3.29a1,1,0,0,0-1.41,0L15.13,5.12l3.75,3.75,1.83-1.83Z" />
   </svg>
 );
diff --git a/stencil-workspace/src/components/icons/icon-error.tsx b/stencil-workspace/src/components/icons/icon-error.tsx
@@ -19,14 +19,14 @@ export const IconError: FunctionalComponent<IconProps> = (props: IconProps) => (
       fill-rule="evenodd"
       clip-rule="evenodd"
       d="M3 12C3 7.032 7.032 3 12 3C16.968 3 21 7.032 21 12C21 16.968 16.968 21 12 21C7.032 21 3 16.968 3 12ZM12.9221 12.6706H11.078L10.7707 7.96292H13.2295L12.9221 12.6706ZM12.0001 16.0989C11.3264 16.0989 10.7823 15.5432 10.7823 14.8811C10.7823 14.2191 11.3264 13.6634 12.0001 13.6634C12.6738 13.6634 13.2178 14.2191 13.2178 14.8811C13.2178 15.5432 12.6738 16.0989 12.0001 16.0989Z"
-      fill={props.color ?? '#6A6976'}
+      fill={props.color ?? 'currentColor'}
     />
     <mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="3" y="3" width="18" height="18">
       <path
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M3 12C3 7.032 7.032 3 12 3C16.968 3 21 7.032 21 12C21 16.968 16.968 21 12 21C7.032 21 3 16.968 3 12ZM12.9221 12.6706H11.078L10.7707 7.96292H13.2295L12.9221 12.6706ZM12.0001 16.0989C11.3264 16.0989 10.7823 15.5432 10.7823 14.8811C10.7823 14.2191 11.3264 13.6634 12.0001 13.6634C12.6738 13.6634 13.2178 14.2191 13.2178 14.8811C13.2178 15.5432 12.6738 16.0989 12.0001 16.0989Z"
-        fill="white"
+        fill="#fff"
       />
     </mask>
     <g mask="url(#mask0)"></g>

diff --git a/stencil-workspace/src/components/icons/icon-expand-all.tsx b/stencil-workspace/src/components/icons/icon-expand-all.tsx
@@ -9,12 +9,8 @@ export const IconExpandAll: FunctionalComponent<IconProps> = (props: IconProps)
     width={props.size ?? 16}
     onClick={props.onClick}
     viewBox="0 0 24 24"
-    fill="none"
+    fill={props.color ?? 'currentColor'}
     xmlns="http://www.w3.org/2000/svg">
-    <path d="M0,0H24V24H0Z" fill="rgba(0,0,0,0)" />
-    <path
-      d="M12,5.83,15.17,9l1.41-1.41L12,3,7.41,7.59,8.83,9Zm0,12.34L8.83,15,7.42,16.41,12,21l4.59-4.59L15.17,15Z"
-      fill={props.color ?? 'currentColor'}
-    />
+    <path d="M12,5.83,15.17,9l1.41-1.41L12,3,7.41,7.59,8.83,9Zm0,12.34L8.83,15,7.42,16.41,12,21l4.59-4.59L15.17,15Z" />
   </svg>
 );