dioxus_material/
icon.rs

1use crate::IconKind;
2use dioxus::prelude::*;
3
4/// Material Symbols icon font.
5#[component]
6pub fn IconFont() -> Element {
7    rsx!(
8        link {
9            href: "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200",
10            rel: "stylesheet"
11        }
12    )
13}
14
15/// Material Symbols icon.
16#[component]
17pub fn Icon(
18    /// Kind of icon.
19    kind: IconKind,
20
21    /// Fill of the icon (optional).
22    is_filled: Option<bool>,
23
24    /// Weight of the icon (optional).
25    weight: Option<u32>,
26
27    /// Optical size of the icon (optional).
28    size: Option<f32>,
29) -> Element {
30    // TODO memo
31    let font_variation_settings = {
32        let mut s = String::new();
33        let mut is_first = true;
34        if is_filled == Some(true) {
35            if !is_first {
36                s.push_str(", ");
37            }
38            s.push_str("'FILL' 1");
39            is_first = false;
40        }
41        if let Some(weight) = weight {
42            if !is_first {
43                s.push_str(", ");
44            }
45            s.push_str(&format!("'wght' {}", weight));
46            is_first = false;
47        }
48        if let Some(size) = size {
49            if !is_first {
50                s.push_str(", ");
51            }
52            s.push_str(&format!("'opsz' {}", size));
53        }
54        s
55    };
56
57    rsx!(
58        span {
59            class: "material-symbols-rounded",
60            style: "font-variation-settings: {font_variation_settings};",
61            { kind.name()}
62        }
63    )
64}
dioxus_material/icon.rs

dioxus_material/
icon.rs
