Add documentation for dynamic_icon feature (#1318)

* Add documentation for dynamic_icon feature

Co-Authored-By: Alek Petuskey <[email protected]>

* Update dynamic icon documentation based on feedback

Co-Authored-By: Alek Petuskey <[email protected]>

* Fix whitelist.py file

Co-Authored-By: Alek Petuskey <[email protected]>

* Remove subtitle qualifiers from headings as requested

Co-Authored-By: Alek Petuskey <[email protected]>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Alek Petuskey <[email protected]>

Author: devin-ai-integration[bot]

docs/library/data-display/icon.md

@@ -36,11 +36,14 @@ rx.flex(
 
 ## Dynamic Icons
 
-It is not possible to use dynamic values as the `tag` prop, because it is used to import the icon from the Lucide library.
-If you have a specific subset of icons you want to use dynamically, define an rx.match with them:
+There are two ways to use dynamic icons in Reflex:
+
+### Using rx.match
+
+If you have a specific subset of icons you want to use dynamically, you can define an `rx.match` with them:
 
 ```python
-def dynamic_icon(icon_name):
+def dynamic_icon_with_match(icon_name):
     return rx.match(
         icon_name,
         ("plus", rx.icon("plus")),
@@ -50,7 +53,7 @@ def dynamic_icon(icon_name):
 ```
 
 ```python exec
-def dynamic_icon(icon_name):
+def dynamic_icon_with_match(icon_name):
     return rx.match(
         icon_name,
         ("plus", rx.icon("plus")),
@@ -59,10 +62,34 @@ def dynamic_icon(icon_name):
     )
 ```
 
-You can then use the `dynamic_icon` function to display the icons dynamically.
+### Using Dynamic Icon Tags
+
+Reflex also supports using dynamic values directly as the `tag` prop in `rx.icon()`. This allows you to use any icon from the Lucide library dynamically at runtime.
+
+```python exec
+class DynamicIconState(rx.State):
+    current_icon: str = "heart"
+    
+    def change_icon(self):
+        icons = ["heart", "star", "bell", "calendar", "settings"]
+        import random
+        self.current_icon = random.choice(icons)
+```
 
 ```python demo
-rx.foreach(["plus", "minus", "equal"], dynamic_icon)    
+rx.vstack(
+    rx.heading("Dynamic Icon Example"),
+    rx.icon(DynamicIconState.current_icon, size=30, color="red"),
+    rx.button("Change Icon", on_click=DynamicIconState.change_icon),
+    spacing="4",
+    align="center",
+)
+```
+
+Under the hood, when a dynamic value is passed as the `tag` prop to `rx.icon()`, Reflex automatically uses a special `DynamicIcon` component that can load icons at runtime.
+
+```md alert
+When using dynamic icons, make sure the icon names are valid. Invalid icon names will cause runtime errors.
 ```
 
 ## Styling
@@ -167,4 +194,4 @@ rx.badge(
     radius="full",
     color_scheme="gray",
 )
-```
+```