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,8 +35,23 @@ where
             border_radius: 0,
         };
 
+        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,
+        };
+
         (
-            if let Some(label) = selected {
+            Primitive::Group {
+                primitives: if let Some(label) = selected {
                     let label = Primitive::Text {
                         content: label,
                         size: f32::from(text_size),
@@ -51,11 +66,10 @@ where
                         vertical_alignment: VerticalAlignment::Center,
                     };
 
-                Primitive::Group {
+                    vec![background, label, arrow_down]
-                    primitives: vec![background, label],
-                }
                 } else {
-                background
+                    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