docs: document custom icon functionality for docs.yml and navigation

- Add documentation for custom icons using file: prefix for local files
- Document inline SVG icon support using < > wrapper
- Update navbar-links section with icon format examples
- Update sidebar icons section with comprehensive examples for all three formats
- Update products section with detailed icon format documentation
- Add examples showing Font Awesome, custom image files, and inline SVG usage

Co-Authored-By: Catherine Deskur <[email protected]>

Author: devin-ai-integration[bot]

fern/products/docs/pages/customization/what-is-docs-yml.mdx

@@ -236,10 +236,12 @@ navbar-links:
   - type: minimal
     text: Contact support
     href: https://example.com/support
+    icon: fa-solid fa-headset
   - type: filled
     text: Login
     href: https://example.com/login
     rounded: false
+    icon: file:assets/icons/login-icon.svg
   - type: github
     value: https://github.com/example-company/fern
 ```
@@ -265,11 +267,19 @@ navbar-links:
 </ParamField>
 
 <ParamField path="icon" type="string" required={false} toc={true}>
-  The [Font Awesome icon](https://fontawesome.com/icons) to be used in the button. This icon will appear to the **left** of the text content. Pro and Brand Icons from Font Awesome are supported.
+  The icon to be used in the button. This icon will appear to the **left** of the text content. Supports three formats:
+  
+  - **Font Awesome icons**: Use icon names like `fa-solid fa-rocket`. Pro and Brand Icons from Font Awesome are supported.
+  - **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets.
+  - **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `<svg>...</svg>`).
 </ParamField>
 
 <ParamField path="rightIcon" type="string" required={false} toc={true}>
-  The [Font Awesome icon](https://fontawesome.com/icons) to be used in the button. This icon will appear to the **right** of the text content. Pro and Brand Icons from Font Awesome are supported.
+  The icon to be used in the button. This icon will appear to the **right** of the text content. Supports three formats:
+  
+  - **Font Awesome icons**: Use icon names like `fa-solid fa-arrow-right`. Pro and Brand Icons from Font Awesome are supported.
+  - **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets.
+  - **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `<svg>...</svg>`).
 
   By default, the `rightIcon` for a `filled` button is set to `arrow-right`.
 </ParamField>

fern/products/docs/pages/navigation/overview.mdx

@@ -199,10 +199,16 @@ navigation:
 
 ## Sidebar icons
 
-For icons to appear next to sections and pages, add the `icon` key. The value should be a valid [Font Awesome icon](https://fontawesome.com/icons) name. Pro and Brand Icons from Font Awesome are supported.
+Add icons next to sections and pages using the `icon` key. Icons support three formats:
+
+- **Font Awesome icons**: Use icon names like `fa-regular fa-home`. Pro and Brand Icons from Font Awesome are supported.
+- **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets.
+- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `<svg>...</svg>`).
+
+### Font Awesome icons
 
 {/* <!-- vale off --> */}
-```yaml Example navigation config with icons
+```yaml Example navigation config with Font Awesome icons
 navigation:
   - section: Home
     icon: fa-regular fa-home
@@ -215,6 +221,40 @@ navigation:
 ```
 {/* <!-- vale on --> */}
 
+### Custom image files
+
+To use custom image files as icons, upload your image files to your docs assets folder, then reference them using the `file:` prefix followed by the relative path to the file.
+
+{/* <!-- vale off --> */}
+```yaml Example navigation config with custom image icons
+navigation:
+  - section: Products
+    icon: file:assets/icons/products-icon.svg
+    contents:
+      - page: Product A
+        icon: file:assets/icons/product-a.png
+        path: ./pages/product-a.mdx
+      - page: Product B
+        icon: file:assets/icons/product-b.png
+        path: ./pages/product-b.mdx
+```
+{/* <!-- vale on --> */}
+
+### Inline SVG icons
+
+You can also provide inline SVG strings directly in your configuration by wrapping them in `< >`.
+
+{/* <!-- vale off --> */}
+```yaml Example navigation config with inline SVG icons
+navigation:
+  - section: Custom Section
+    icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>
+    contents:
+      - page: Custom Page
+        path: ./pages/custom-page.mdx
+```
+{/* <!-- vale on --> */}
+
 ## Links
 
 You can add a link to an external page within your sidebar navigation with the following configuration:
@@ -237,7 +277,11 @@ navigation:
 
 ## Tabs
 
-Within the navigation, you can add `tabs`. Tabs are used to group sections together. The example below shows tabs for `Help Center`, `API Reference`, and an external link to `Github`. Each tab has a `title` and `icon`. [Browse the icons available](https://fontawesome.com/icons) from Font Awesome. Pro and Brand Icons are supported.
+Within the navigation, you can add `tabs`. Tabs are used to group sections together. The example below shows tabs for `Help Center`, `API Reference`, and an external link to `Github`. Each tab has a `title` and `icon`. Icons support three formats:
+
+- **Font Awesome icons**: Use icon names like `puzzle` or `fa-solid fa-puzzle`. [Browse the icons available](https://fontawesome.com/icons) from Font Awesome. Pro and Brand Icons are supported.
+- **Custom image files**: Use `file:` prefix followed by the file ID (e.g., `file:my-icon`). The file must be uploaded to your docs assets.
+- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `<svg>...</svg>`).
 
 <CodeBlock title="docs.yml">
 {/* <!-- vale off --> */}

fern/products/docs/pages/navigation/products.mdx

@@ -94,22 +94,57 @@ The optional parameters are: `image`, `icon`, `subtitle`, `slug`, and `versions`
 
 <Note>If you provide both an `image` and an `icon`, the `image` will take precedence.</Note>
 
-The below example is a `docs.yml` configuration for a site with two products, Product A and Product B.
+### Product icons
+
+Product icons support three formats:
+
+- **Font Awesome icons**: Use icon names like `fa-solid fa-leaf`. Pro and Brand Icons from Font Awesome are supported.
+- **Custom image files**: Use `file:` prefix followed by the relative path to the file (e.g., `file:assets/icons/my-icon.svg`). The file must be in your docs assets folder.
+- **Inline SVG**: Provide an SVG string wrapped in `< >` (e.g., `<svg>...</svg>`).
+
+#### Font Awesome icons
 
 <CodeBlock title="docs.yml">
-```yaml {2-3, 8-9}
+```yaml
 products:
   - display-name: Product A
     path: ./products/product-a.yml
-    icon: fa-solid fa-leaf # optional
-    slug: product-a # optional
-    subtitle: Product A subtitle # optional
+    icon: fa-solid fa-leaf
+    slug: product-a
+    subtitle: Product A subtitle
+```
+</CodeBlock>
+
+#### Custom image files
 
+To use custom image files as product icons, upload your image files to your docs assets folder, then reference them using the `file:` prefix followed by the relative path.
+
+<CodeBlock title="docs.yml">
+```yaml
+products:
+  - display-name: Product A
+    path: ./products/product-a.yml
+    icon: file:assets/icons/product-a-icon.svg
+    slug: product-a
+    subtitle: Product A subtitle
   - display-name: Product B
-    path: ./products/product-b/versions/latest/latest.yml # <-- default showing latest
-    image: ./images/product-b.png # optional
-    slug: product-b # optional
-    subtitle: Product B subtitle # optional
+    path: ./products/product-b.yml
+    icon: file:assets/icons/product-b-icon.png
+    slug: product-b
+    subtitle: Product B subtitle
+```
+</CodeBlock>
+
+#### Inline SVG icons
+
+<CodeBlock title="docs.yml">
+```yaml
+products:
+  - display-name: Product A
+    path: ./products/product-a.yml
+    icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>
+    slug: product-a
+    subtitle: Product A subtitle
 ```
 </CodeBlock>
 </Step>
@@ -324,4 +359,4 @@ The dropdown menus for product and version selectors can be customized using the
       <img src="webflow-version-selector.avif" alt="Example of a styled version selector" />
     </Frame>
   </Tab>
-</Tabs> 
+</Tabs>