✨ Add SearchIcon, SpacesIcon, ChatsIcon and RoomsIcon elements

Cargo.toml

@@ -10,8 +10,8 @@ web = ["dioxus/web"]
 
 [dependencies]
 dioxus = "0.5.*"
-dioxus-free-icons = { version = "0.8", features = ["material-design-icons-navigation", "ionicons"] }
 dioxus-sdk = { version = "0.5.*", features = ["utils"] }
+dioxus-free-icons = { version = "0.8.*", features = ["ionicons", "font-awesome-solid", "material-design-icons-navigation"] }
 
 # matrix-sdk = { git = "https://github.com/matrix-org/matrix-rust-sdk.git", branch = "main", default-features = false, features = ["js", "rustls-tls"] }
 matrix-sdk = { version = "0.7.*", default-features = false, features = ["js", "rustls-tls"] }

src/ui/components/icons.rs

@@ -1,5 +1,8 @@
 use const_format::formatcp;
 use dioxus::prelude::*;
+use dioxus_free_icons::icons::fa_solid_icons::{
+    FaComments, FaLayerGroup, FaMagnifyingGlass, FaPeopleGroup,
+};
 use dioxus_free_icons::icons::md_navigation_icons::MdArrowDropDown;
 use dioxus_free_icons::{Icon, IconShape};
 
@@ -9,7 +12,28 @@ include!(concat!(env!("OUT_DIR"), "/style_vars.rs"));
 
 use style::{COLOR_PRIMARY_100, COLOR_TERNARY_100};
 
-pub fn DownArrowIcon() -> Element {
+macro_rules! transparent_icon {
+    ($name:ident, $icon:ident) => {
+        pub fn $name() -> Element {
+            rsx! {
+                style { {STYLE_SHEET} },
+                Icon {
+                    class: ClassName::TRANSPARENT_ICON,
+                    icon: $icon,
+                }
+            }
+        }
+    };
+}
+
+// TODO: Remove this icon once the conversation panel finished
+transparent_icon!(DownArrowIcon, MdArrowDropDown);
+
+transparent_icon!(SearchIcon, FaMagnifyingGlass);
+transparent_icon!(SpacesIcon, FaLayerGroup);
+transparent_icon!(ChatsIcon, FaComments);
+transparent_icon!(RoomsIcon, FaPeopleGroup);
+
 #[derive(Clone, PartialEq)]
 pub(crate) struct LogoShape;
 impl IconShape for LogoShape {

src/ui/components/icons.scss

@@ -1,4 +1,4 @@
-.down-arrow-icon {
+.transparent-icon {
 	color: transparent;
 
     path:last-child {