✨ feat: button add icon

examples/basic/Cargo.toml

@@ -8,3 +8,4 @@ edition = "2021"
 [dependencies]
 leptos = { version = "0.2.5", features = ["stable"] }
 melt-ui = { path = "../../" }
+leptos-icons = { git = "https://github.com/Carlosted/leptos-icons.git", features = ["AiCloseOutlined", "AiCheckOutlined"] }

examples/basic/src/demo_button.rs

@@ -29,6 +29,9 @@ pub fn DemoButton(cx: Scope) -> impl IntoView {
             <Button color=ButtonColor::ERROR>
                 "ERROR Color"
             </Button>
+            <Button color=ButtonColor::ERROR icon=leptos_icons::AiIcon::AiCloseOutlined>
+                "ERROR Color Icon"
+            </Button>
         </Space>
     }
 }

src/button/button.css

@@ -6,6 +6,11 @@
     border: 1px solid var(--border-color);
     border-radius: 5px;
     cursor: pointer;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    user-select: none;
 }
 
 .melt-button:hover {
@@ -25,4 +30,4 @@
 
 .melt-button--link:hover {
     color: var(--font-color-hover);
-}
+}

src/button/mod.rs

@@ -1,6 +1,7 @@
 mod theme;
 use crate::{theme::*, utils::mount_style::mount_style};
 use leptos::*;
+use leptos_icons::*;
 use stylers::style_sheet_str;
 pub use theme::ButtonTheme;
 
@@ -38,6 +39,7 @@ pub fn Button(
     cx: Scope,
     #[prop(optional, into)] type_: MaybeSignal<ButtonType>,
     #[prop(optional, into)] color: MaybeSignal<ButtonColor>,
+    #[prop(optional, into)] icon: Option<leptos_icons::Icon>,
     children: Children,
 ) -> impl IntoView {
     let theme = use_theme(cx, Theme::light);
@@ -67,6 +69,15 @@ pub fn Button(
             class=("melt-button--link", move || type_.get() == ButtonType::LINK)
             style=move || css_vars.get()
             >
+            {
+                if let Some(icon) = icon {
+                    view!{cx,
+                            <LeptosIcon icon=icon style="margin-right: 6px"/>
+                    }.into()
+                } else {
+                    None
+                }
+            }
             {children(cx)}
         </button>
     }