Render arrow icon in `ComboBox`

glow/src/backend.rs

@@ -193,6 +193,7 @@ impl iced_graphics::Backend for Backend {
 impl backend::Text for Backend {
     const ICON_FONT: Font = font::ICONS;
     const CHECKMARK_ICON: char = font::CHECKMARK_ICON;
+    const ARROW_DOWN_ICON: char = font::ARROW_DOWN_ICON;
 
     fn default_size(&self) -> u16 {
         self.default_text_size

graphics/src/backend.rs

@@ -22,9 +22,14 @@ pub trait Text {
 
     /// The `char` representing a ✔ icon in the [`ICON_FONT`].
     ///
-    /// [`ICON_FONT`]: #associatedconst.ICON_FONt
+    /// [`ICON_FONT`]: #associatedconst.ICON_FONT
     const CHECKMARK_ICON: char;
 
+    /// The `char` representing a ▼ icon in the built-in [`ICONS`] font.
+    ///
+    /// [`ICON_FONT`]: #associatedconst.ICON_FONT
+    const ARROW_DOWN_ICON: char;
+
     /// Returns the default size of text.
     fn default_size(&self) -> u16;
 

graphics/src/font.rs

@@ -31,3 +31,9 @@ pub const ICONS: iced_native::Font = iced_native::Font::External {
 #[cfg(feature = "font-icons")]
 #[cfg_attr(docsrs, doc(cfg(feature = "font-icons")))]
 pub const CHECKMARK_ICON: char = '\u{F00C}';
+
+/// The `char` representing a ▼ icon in the built-in [`ICONS`] font.
+///
+/// [`ICONS`]: const.ICONS.html
+#[cfg(feature = "font-icons")]
+pub const ARROW_DOWN_ICON: char = '\u{E800}';

graphics/src/widget/combo_box.rs

@@ -35,27 +35,41 @@ where
             border_radius: 0,
         };
 
-        (
-            if let Some(label) = selected {
-                let label = Primitive::Text {
-                    content: label,
-                    size: f32::from(text_size),
-                    font: Font::Default,
-                    color: Color::BLACK,
-                    bounds: Rectangle {
-                        x: bounds.x + f32::from(padding),
-                        y: bounds.center_y(),
-                        ..bounds
-                    },
-                    horizontal_alignment: HorizontalAlignment::Left,
-                    vertical_alignment: VerticalAlignment::Center,
-                };
+        let arrow_down = Primitive::Text {
+            content: B::ARROW_DOWN_ICON.to_string(),
+            font: B::ICON_FONT,
+            size: bounds.height * 0.7,
+            bounds: Rectangle {
+                x: bounds.x + bounds.width - f32::from(padding) * 2.0,
+                y: bounds.center_y(),
+                ..bounds
+            },
+            color: Color::BLACK,
+            horizontal_alignment: HorizontalAlignment::Right,
+            vertical_alignment: VerticalAlignment::Center,
+        };
 
-                Primitive::Group {
-                    primitives: vec![background, label],
-                }
-            } else {
-                background
+        (
+            Primitive::Group {
+                primitives: if let Some(label) = selected {
+                    let label = Primitive::Text {
+                        content: label,
+                        size: f32::from(text_size),
+                        font: Font::Default,
+                        color: Color::BLACK,
+                        bounds: Rectangle {
+                            x: bounds.x + f32::from(padding),
+                            y: bounds.center_y(),
+                            ..bounds
+                        },
+                        horizontal_alignment: HorizontalAlignment::Left,
+                        vertical_alignment: VerticalAlignment::Center,
+                    };
+
+                    vec![background, label, arrow_down]
+                } else {
+                    vec![background, arrow_down]
+                },
             },
             if is_mouse_over {
                 mouse::Interaction::Pointer

native/src/widget/combo_box.rs

@@ -126,7 +126,9 @@ where
 
         let size = {
             let intrinsic = Size::new(
-                max_width as f32 + f32::from(text_size),
+                max_width as f32
+                    + f32::from(text_size)
+                    + f32::from(self.padding),
                 f32::from(text_size),
             );
 

wgpu/src/backend.rs

@@ -248,6 +248,7 @@ impl iced_graphics::Backend for Backend {
 impl backend::Text for Backend {
     const ICON_FONT: Font = font::ICONS;
     const CHECKMARK_ICON: char = font::CHECKMARK_ICON;
+    const ARROW_DOWN_ICON: char = font::ARROW_DOWN_ICON;
 
     fn default_size(&self) -> u16 {
         self.default_text_size