feat(menu): add icon support for Submenu in Rust and JS/TS APIs (#13722)

* feat(menu): add icon and nativeIcon support for Submenu in tauri and @tauri-apps/api

* Merge branch 'dev' into dev

* Update muda

* feat(menu): add set_icon and set_native_icon methods to set submenu icons

* feat(menu): unify icon handling by introducing MenuIcon type

* chore: sync bundle.global.js

* Make setIcon actually work

* Regenerate `bundle.global.js`

---------

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

Author: s00d

.changes/submenu-icon-support.md

@@ -0,0 +1,11 @@
+---
+'@tauri-apps/api': 'minor:enhance'
+'tauri': 'minor:enhance'
+---
+
+Added icon (icon and nativeIcon) support for Submenu:
+- In the Rust API (`tauri`), you can now set an icon for submenus via the builder and dedicated methods.
+- In the JS/TS API (`@tauri-apps/api`), `SubmenuOptions` now has an `icon` field, and the `Submenu` class provides `setIcon` and `setNativeIcon` methods.
+- Usage examples are added to the documentation and demo app.
+
+This is a backwards-compatible feature. Submenus can now display icons just like regular menu items.

Cargo.lock

@@ -117,6 +117,8 @@ pub struct SubmenuBuilder<'m, R: Runtime, M: Manager<R>> {
   pub(crate) text: String,
   pub(crate) enabled: bool,
   pub(crate) items: Vec<crate::Result<MenuItemKind<R>>>,
+  pub(crate) icon: Option<crate::image::Image<'m>>,
+  pub(crate) native_icon: Option<NativeIcon>,
 }
 
 impl<'m, R: Runtime, M: Manager<R>> SubmenuBuilder<'m, R, M> {
@@ -131,6 +133,8 @@ impl<'m, R: Runtime, M: Manager<R>> SubmenuBuilder<'m, R, M> {
       text: text.as_ref().to_string(),
       enabled: true,
       manager,
+      icon: None,
+      native_icon: None,
     }
   }
 
@@ -145,9 +149,27 @@ impl<'m, R: Runtime, M: Manager<R>> SubmenuBuilder<'m, R, M> {
       enabled: true,
       items: Vec::new(),
       manager,
+      icon: None,
+      native_icon: None,
     }
   }
 
+  /// Set an icon for the submenu.
+  /// Calling this method resets the native_icon.
+  pub fn submenu_icon(mut self, icon: crate::image::Image<'m>) -> Self {
+    self.icon = Some(icon);
+    self.native_icon = None;
+    self
+  }
+
+  /// Set a native icon for the submenu.
+  /// Calling this method resets the icon.
+  pub fn submenu_native_icon(mut self, icon: NativeIcon) -> Self {
+    self.native_icon = Some(icon);
+    self.icon = None;
+    self
+  }
+
   /// Set the enabled state for the submenu.
   pub fn enabled(mut self, enabled: bool) -> Self {
     self.enabled = enabled;
@@ -157,7 +179,23 @@ impl<'m, R: Runtime, M: Manager<R>> SubmenuBuilder<'m, R, M> {
   /// Builds this submenu
   pub fn build(self) -> crate::Result<Submenu<R>> {
     let submenu = if let Some(id) = self.id {
-      Submenu::with_id(self.manager, id, self.text, self.enabled)?
+      if let Some(icon) = self.icon {
+        Submenu::with_id_and_icon(self.manager, id, self.text, self.enabled, Some(icon))?
+      } else if let Some(native_icon) = self.native_icon {
+        Submenu::with_id_and_native_icon(
+          self.manager,
+          id,
+          self.text,
+          self.enabled,
+          Some(native_icon),
+        )?
+      } else {
+        Submenu::with_id(self.manager, id, self.text, self.enabled)?
+      }
+    } else if let Some(icon) = self.icon {
+      Submenu::new_with_icon(self.manager, self.text, self.enabled, Some(icon))?
+    } else if let Some(native_icon) = self.native_icon {
+      Submenu::new_with_native_icon(self.manager, self.text, self.enabled, Some(native_icon))?
     } else {
       Submenu::new(self.manager, self.text, self.enabled)?
     };

crates/tauri/scripts/bundle.global.js

@@ -99,6 +99,7 @@ struct SubmenuPayload {
   text: String,
   enabled: Option<bool>,
   items: Vec<MenuItemPayloadKind>,
+  icon: Option<Icon>,
 }
 
 impl SubmenuPayload {
@@ -115,6 +116,14 @@ impl SubmenuPayload {
     if let Some(enabled) = self.enabled {
       builder = builder.enabled(enabled);
     }
+    if let Some(icon) = self.icon {
+      builder = match icon {
+        Icon::Native(native_icon) => builder.submenu_native_icon(native_icon),
+        Icon::Icon(js_icon) => {
+          builder.submenu_icon(js_icon.into_img(resources_table)?.as_ref().clone())
+        }
+      };
+    }
     for item in self.items {
       builder = item.with_item(webview, resources_table, |i| Ok(builder.item(i)))?;
     }
@@ -380,6 +389,7 @@ fn new<R: Runtime>(
         text: options.text.unwrap_or_default(),
         enabled: options.enabled,
         items: options.items.unwrap_or_default(),
+        icon: options.icon,
       }
       .create_item(&webview, &resources_table)?;
       let id = submenu.id().clone();
@@ -849,22 +859,27 @@ fn set_checked<R: Runtime>(
 fn set_icon<R: Runtime>(
   webview: Webview<R>,
   rid: ResourceId,
+  kind: ItemKind,
   icon: Option<Icon>,
 ) -> crate::Result<()> {
   let resources_table = webview.resources_table();
-  let icon_item = resources_table.get::<IconMenuItem<R>>(rid)?;
-
-  match icon {
-    Some(Icon::Native(icon)) => icon_item.set_native_icon(Some(icon)),
-    Some(Icon::Icon(icon)) => {
-      icon_item.set_icon(Some(icon.into_img(&resources_table)?.as_ref().clone()))
-    }
-    None => {
-      icon_item.set_icon(None)?;
-      icon_item.set_native_icon(None)?;
-      Ok(())
-    }
-  }
+  do_menu_item!(
+    resources_table,
+    rid,
+    kind,
+    |icon_item| match icon {
+      Some(Icon::Native(icon)) => icon_item.set_native_icon(Some(icon)),
+      Some(Icon::Icon(icon)) => {
+        icon_item.set_icon(Some(icon.into_img(&resources_table)?.as_ref().clone()))
+      }
+      None => {
+        icon_item.set_icon(None)?;
+        icon_item.set_native_icon(None)?;
+        Ok(())
+      }
+    },
+    Icon | Submenu
+  )
 }
 
 struct MenuChannels(Mutex<HashMap<MenuId, Channel<MenuId>>>);