dioxus-material-icons 4.0.1

Material Icons for Dioxus
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

#![allow(non_snake_case)]

//! # Button Example
//!
//! This example renders a material icon into a button which can be clicked to toggle the
//! color of the icon.

use dioxus::prelude::*;
use dioxus_material_icons::{IconColor, MaterialIcon, MaterialIconStylesheet, MaterialIconVariant};

fn main() {
    dioxus::launch(App);
}

fn App() -> Element {
    let mut is_blue = use_signal(|| false);

    rsx!(
        MaterialIconStylesheet {
            // Uses the self-hosted approach
            variant: MaterialIconVariant::SelfHosted(
                asset!("/examples/assets/MaterialIcons-Regular.woff2").to_string(),
            ),
        }

        button {
            style: "padding: 1rem; font-size: 1rem; display:flex; flex-direction: column; align-items: center;",
            onclick: move |_| is_blue.set(!is_blue()),
            // The size prop was omitted, so both icons inherit their size from the button element above
            if is_blue() {
                // Render material icon "home" in blue
                MaterialIcon { name: "home", size: 48, color: IconColor("blue") }
            } else {
                // Render material icon "home" in default color
                MaterialIcon { name: "home", size: 48 }
            }
            "Home"
        }
    )
}