From ed4cd709e391841a45a9e585edc893fc0574ef5c Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Tue, 23 Mar 2021 10:13:04 -0700
Subject: [PATCH 1/4] removed SVGs to use the default

---
 .../src/accordion/fixtures/base.html          | 301 +-----------------
 1 file changed, 2 insertions(+), 299 deletions(-)

diff --git a/packages/web-components/src/accordion/fixtures/base.html b/packages/web-components/src/accordion/fixtures/base.html
index 3941b944a44f7..0e1f23016130d 100644
--- a/packages/web-components/src/accordion/fixtures/base.html
+++ b/packages/web-components/src/accordion/fixtures/base.html
@@ -1,7 +1,7 @@
 <fluent-design-system-provider use-defaults>
   <style>
-    .icon {
-      stroke: var(--accent-fill-rest);
+    fluent-accordion-item::part(icon) {
+      fill: var(--accent-fill-rest);
     }
 
     fluent-accordion-item.disabled::part(button) {
@@ -19,113 +19,14 @@ <h4>Default</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel one</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item>
       <span slot="heading">Panel two</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel two content
     </fluent-accordion-item>
     <fluent-accordion-item expanded>
       <span slot="heading">Panel three</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>
@@ -139,113 +40,14 @@ <h4>Single expand</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel one</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item class="disabled">
       <span slot="heading">Panel Two</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel two content
     </fluent-accordion-item>
     <fluent-accordion-item>
       <span slot="heading">Panel three</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>
@@ -259,39 +61,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel two</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel one content
     </fluent-accordion-item>
     <fluent-accordion-item class="disabled">
@@ -302,39 +71,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Disabled</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Disabled content
     </fluent-accordion-item>
     <fluent-accordion-item expanded>
@@ -345,39 +81,6 @@ <h4>With disabled item</h4>
         <button>1</button>
       </div>
       <span slot="heading">Panel three</span>
-      <svg
-        slot="collapsed-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M9 5.44446V12.5556" stroke-linecap="round" stroke-linejoin="round" />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
-      <svg
-        slot="expanded-icon"
-        class="icon"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M15.2222 1H2.77778C1.79594 1 1 1.79594 1 2.77778V15.2222C1 16.2041 1.79594 17 2.77778 17H15.2222C16.2041 17 17 16.2041 17 15.2222V2.77778C17 1.79594 16.2041 1 15.2222 1Z"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        />
-        <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
-      </svg>
       Panel three content
     </fluent-accordion-item>
   </fluent-accordion>

From 25131aad01b6676d555a0d21d91ad4e77363f90c Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Tue, 23 Mar 2021 10:23:57 -0700
Subject: [PATCH 2/4] Change files

---
 ...eb-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json

diff --git a/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json b/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json
new file mode 100644
index 0000000000000..3e0fae1045833
--- /dev/null
+++ b/change/@fluentui-web-components-199e3bcd-b1b1-4ab4-aba7-c3c11a6d5d60.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "removed SVGs to use the default",
+  "packageName": "@fluentui/web-components",
+  "email": "khamu@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 9a6663fc7e4936fdbe42e57dac752891e91c207e Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Tue, 23 Mar 2021 11:06:27 -0700
Subject: [PATCH 3/4] set the fill color of the icon in style

---
 .../src/accordion/accordion-item/accordion-item.styles.ts     | 4 ++++
 packages/web-components/src/accordion/fixtures/base.html      | 4 ----
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
index ac6614490d17f..6ad1402d62e7e 100644
--- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -85,6 +85,7 @@ export const AccordionItemStyles = css`
         grid-column: 4;
         z-index: 2;
         pointer-events: none;
+        fill: var(--accent-fill-rest);
     }
 
     slot[name="collapsed-icon"] {
@@ -132,6 +133,9 @@ export const AccordionItemStyles = css`
                 border-color: ${SystemColors.Highlight};
                 box-shadow: 0 0 0 calc((var(--focus-outline-width) - var(--outline-width)) * 1px) ${SystemColors.Highlight};
             }
+            .icon {
+              fill: ${SystemColors.ButtonText};
+            }
         `,
   ),
 );
diff --git a/packages/web-components/src/accordion/fixtures/base.html b/packages/web-components/src/accordion/fixtures/base.html
index 0e1f23016130d..cdb17147feba8 100644
--- a/packages/web-components/src/accordion/fixtures/base.html
+++ b/packages/web-components/src/accordion/fixtures/base.html
@@ -1,9 +1,5 @@
 <fluent-design-system-provider use-defaults>
   <style>
-    fluent-accordion-item::part(icon) {
-      fill: var(--accent-fill-rest);
-    }
-
     fluent-accordion-item.disabled::part(button) {
       pointer-events: none;
     }

From cf2c0b1a2b0cfb8f82120f827b9a4f30b598bcec Mon Sep 17 00:00:00 2001
From: Kham Udom <khamu@microsoft.com>
Date: Tue, 23 Mar 2021 12:10:00 -0700
Subject: [PATCH 4/4] using accentFillRestBehavior.var on fill

---
 .../src/accordion/accordion-item/accordion-item.styles.ts     | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
index 6ad1402d62e7e..30a82d8e2a401 100644
--- a/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
+++ b/packages/web-components/src/accordion/accordion-item/accordion-item.styles.ts
@@ -2,6 +2,7 @@ import { css } from '@microsoft/fast-element';
 import { display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import {
+  accentFillRestBehavior,
   neutralDividerRestBehavior,
   neutralFocusBehavior,
   neutralForegroundActiveBehavior,
@@ -85,7 +86,7 @@ export const AccordionItemStyles = css`
         grid-column: 4;
         z-index: 2;
         pointer-events: none;
-        fill: var(--accent-fill-rest);
+        fill: ${accentFillRestBehavior.var};
     }
 
     slot[name="collapsed-icon"] {
@@ -121,6 +122,7 @@ export const AccordionItemStyles = css`
         z-index: 2;
     }
 `.withBehaviors(
+  accentFillRestBehavior,
   neutralDividerRestBehavior,
   neutralForegroundActiveBehavior,
   neutralForegroundFocusBehavior,