docs(data-table): add "Custom expand icon" example

Author: metonym

docs/src/pages/components/DataTable.svx

@@ -1217,6 +1217,12 @@ Set `expandable` to `true` to make rows expandable. Use the `expanded-row` slot
   </svelte:fragment>
 </DataTable>
 
+## Custom expand icon
+
+Use the `expandIcon` slot to customize the expand/collapse icon. The slot receives `expanded` (whether the row is expanded), `row` (the row data, or `undefined` for the header expand-all button), and `props` (object with `aria-hidden` and `class` to spread onto your icon).
+
+<FileSource src="/framed/DataTable/DataTableExpandIcon" />
+
 ## Non-expandable rows
 
 Use `nonExpandableRowIds` to prevent expansion of specific rows.

docs/src/pages/framed/DataTable/DataTableExpandIcon.svelte

@@ -0,0 +1,68 @@
+<script>
+  import { DataTable } from "carbon-components-svelte";
+  import Add from "carbon-icons-svelte/lib/Add.svelte";
+</script>
+
+<DataTable
+  expandable
+  headers={[
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+    { key: "port", value: "Port" },
+    { key: "rule", value: "Rule" },
+  ]}
+  rows={[
+    {
+      id: "a",
+      name: "Load Balancer 3",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+    },
+    {
+      id: "b",
+      name: "Load Balancer 1",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+    },
+    {
+      id: "c",
+      name: "Load Balancer 2",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+    },
+    {
+      id: "d",
+      name: "Load Balancer 6",
+      protocol: "HTTP",
+      port: 3000,
+      rule: "Round robin",
+    },
+    {
+      id: "e",
+      name: "Load Balancer 4",
+      protocol: "HTTP",
+      port: 443,
+      rule: "Round robin",
+    },
+    {
+      id: "f",
+      name: "Load Balancer 5",
+      protocol: "HTTP",
+      port: 80,
+      rule: "DNS delegation",
+    },
+  ]}
+>
+  <svelte:fragment slot="expandIcon" let:expanded let:props>
+    <Add
+      {...props}
+      style="display: inline-block; transition: transform 0.2s ease; transform: {expanded ? 'rotate(45deg)' : 'rotate(0deg)'}"
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
+  </svelte:fragment>
+</DataTable>