Add custom Icon color example (#2762)

Co-authored-by: mikearildbrown <[email protected]>

site/docs/components/icon/examples.mdx

@@ -38,6 +38,11 @@ data:
 
     If you need a custom SVG icon, use the Icon component. Icon has the same API as the native `<svg>` element. Whenever you add a custom icon, pass an `aria-label` to Icon.
 
+  </LivePreview>
+  <LivePreview componentName="icon" exampleName="CustomColors">
+    ### Custom colors
+    If you need to use a color other than "primary" or "secondary", use `color="inherit"` or use CSS to change the icon's `fill`.
+
   </LivePreview>
   <LivePreview componentName="icon" exampleName="AllIcons">
     ### All Icons

site/src/examples/icon/CustomColors.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import { ArrowDownIcon, ArrowUpIcon } from "@salt-ds/icons";
+import { StackLayout } from "@salt-ds/core";
+
+export const CustomColors = (): ReactElement => {
+  return (
+    <StackLayout direction="row">
+      <div style={{ color: "var(--salt-status-positive-foreground)" }}>
+        <ArrowUpIcon color="inherit" size={2} />
+      </div>
+      <ArrowDownIcon
+        style={{ fill: "var(--salt-status-negative-foreground)" }}
+        size={2}
+      />
+    </StackLayout>
+  );
+};

site/src/examples/icon/CustomIcon.tsx

@@ -1,5 +1,5 @@
 import { ReactElement } from "react";
-import { Icon, IconProps } from "@salt-ds/icons";
+import { Icon } from "@salt-ds/icons";
 
 export const CustomIcon = (): ReactElement => {
   return (

site/src/examples/icon/index.ts

@@ -1,6 +1,7 @@
 export * from "./BasicIcon";
 export * from "./AllIcons";
 export * from "./IconColor";
+export * from "./CustomColors";
 export * from "./CustomIcon";
 export * from "./IconSize";
 export * from "./IconTypes";