From aed28adbe46c727875e127f1eb3f02e3404059dc Mon Sep 17 00:00:00 2001
From: Lindsay M <126139086+lindsaym-fa@users.noreply.github.com>
Date: Fri, 2 May 2025 10:30:51 -0400
Subject: [PATCH] Update to FA 6.7.2 and add all Duotone styles (#906)

* Update to FA 6.7.2 and add all Duotone styles

* Add changelog
---
 docs/docs/components/icon.md           |  9 ++++++---
 docs/docs/resources/changelog.md       |  1 +
 src/components/icon/library.default.ts | 25 ++++++++++++++++++-------
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md
index 3f5c1b82e..166a4b04e 100644
--- a/docs/docs/components/icon.md
+++ b/docs/docs/components/icon.md
@@ -17,11 +17,14 @@ Not sure which icon to use? [Find the perfect icon over at Font Awesome!](https:
 
 The default icon library is Font Awesome Free, which comes with two icon families: `classic` and `brands`. Use the `family` attribute to set the icon family.
 
-Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp` and `duotone`. For these icon families, use the `variant` attribute to set the variant.
+Many Font Awesome Pro icon families have variants such as `thin`, `light`, `regular`, and `solid`. Font Awesome Pro users can [provide their kit code](/docs/#using-font-awesome-kit-codes) to unlock additional families, including `sharp`, `duotone`, and `sharp-duotone`. For these icon families, use the `variant` attribute to set the variant.
 
 ```html {.example}
-<wa-icon family="brands" name="font-awesome"></wa-icon>
-<wa-icon family="brands" name="web-awesome"></wa-icon>
+  <wa-icon family="brands" name="font-awesome"></wa-icon>
+  <wa-icon family="brands" name="web-awesome"></wa-icon>
+  <wa-icon family="classic" variant="light" name="sparkles"></wa-icon>
+  <wa-icon family="sharp" variant="solid" name="fire"></wa-icon>
+  <wa-icon family="duotone" variant="regular" name="cake-slice"></wa-icon>
 ```
 
 ### Setting defaults via CSS
diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md
index d6b830510..700ca9040 100644
--- a/docs/docs/resources/changelog.md
+++ b/docs/docs/resources/changelog.md
@@ -18,6 +18,7 @@ During the alpha period, things might break! We take breaking changes very serio
 - Fixed a bug that caused `<wa-radio-group>` to have an undesired margin below it
 - Fixed a bug in `<wa-select>` that caused incorrect spacing of icons
 - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control
+- Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `<wa-icon>`
 
 ## 3.0.0-alpha.12
 
diff --git a/src/components/icon/library.default.ts b/src/components/icon/library.default.ts
index 23d6847d7..68f5f1424 100644
--- a/src/components/icon/library.default.ts
+++ b/src/components/icon/library.default.ts
@@ -22,20 +22,31 @@ function getIconUrl(name: string, family: string, variant: string) {
     if (variant === 'solid') folder = 'sharp-solid';
   }
 
+  // Duotone
+  if (family === 'duotone') {
+    if (variant === 'thin') folder = 'duotone-thin';
+    if (variant === 'light') folder = 'duotone-light';
+    if (variant === 'regular') folder = 'duotone-regular';
+    if (variant === 'solid') folder = 'duotone';
+  }
+
+  // Sharp Duotone
+  if (family === 'sharp-duotone') {
+    if (variant === 'thin') folder = 'sharp-duotone-thin';
+    if (variant === 'light') folder = 'sharp-duotone-light';
+    if (variant === 'regular') folder = 'sharp-duotone-regular';
+    if (variant === 'solid') folder = 'sharp-duotone-solid';
+  }
+
   // Brands
   if (family === 'brands') {
     folder = 'brands';
   }
 
-  // Duotone
-  if (family === 'duotone') {
-    folder = 'duotone';
-  }
-
   // Use the default CDN
   return isPro
-    ? `https://ka-p.fontawesome.com/releases/v6.5.2/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
-    : `https://ka-f.fontawesome.com/releases/v6.5.2/svgs/${folder}/${name}.svg`;
+    ? `https://ka-p.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg?token=${encodeURIComponent(kitCode)}`
+    : `https://ka-f.fontawesome.com/releases/v6.7.2/svgs/${folder}/${name}.svg`;
 }
 
 const library: IconLibrary = {