Add support for self-hosting the font file

examples/button.rs

@@ -2,6 +2,7 @@
 
 use dioxus::prelude::*;
 use dioxus_material_icons::{MaterialIconStylesheet, MaterialIcon};
+use dioxus_material_icons::MaterialIconVariant::SelfHosted;
 
 fn main() {
     dioxus_desktop::launch(App);
@@ -11,7 +12,7 @@ fn App(cx: Scope) -> Element {
     let show_face = use_state(&cx, || false);
 
     cx.render(rsx!(
-        MaterialIconStylesheet { }
+        MaterialIconStylesheet { variant: SelfHosted { file: "examples/assets/MaterialIcons-Regular.ttf" } }
         button {
             style: "padding: 10",
             onclick: move |_| show_face.set(!show_face),

src/lib.rs

@@ -3,26 +3,34 @@
 use dioxus::prelude::*;
 
 #[derive(Props, PartialEq)]
-pub struct MaterialIconStylesheetProps {
-    variation: MaterialIconVariation,
+pub struct MaterialIconStylesheetProps<'a> {
+    variant: MaterialIconVariant<'a>,
 }
 
 #[derive(PartialEq)]
-pub enum MaterialIconVariation {
+pub enum MaterialIconVariant<'a> {
     Regular,
     Outlined,
     Round,
     Sharp,
     TwoTone,
+    SelfHosted {
+        file: &'a str,
+    },
 }
 
-pub fn MaterialIconStylesheet(cx: Scope<MaterialIconStylesheetProps>) -> Element {
-    let href = match &cx.props.variation {
-        MaterialIconVariation::Regular => "https://fonts.googleapis.com/icon?family=Material+Icons",
-        MaterialIconVariation::Outlined => "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined",
-        MaterialIconVariation::Round => "https://fonts.googleapis.com/icon?family=Material+Icons+Round",
-        MaterialIconVariation::Sharp => "https://fonts.googleapis.com/icon?family=Material+Icons+Sharp",
-        MaterialIconVariation::TwoTone => "https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone",
+pub fn MaterialIconStylesheet<'a>(cx: Scope<'a, MaterialIconStylesheetProps<'a>>) -> Element<'a> {
+    let href = match &cx.props.variant {
+        MaterialIconVariant::SelfHosted { file } => {
+            return cx.render(rsx!(
+                style { format!(include_str!("./self-hosted-styles.css"), file) }
+            ));
+        }
+        MaterialIconVariant::Regular => "https://fonts.googleapis.com/icon?family=Material+Icons",
+        MaterialIconVariant::Outlined => "https://fonts.googleapis.com/icon?family=Material+Icons+Outlined",
+        MaterialIconVariant::Round => "https://fonts.googleapis.com/icon?family=Material+Icons+Round",
+        MaterialIconVariant::Sharp => "https://fonts.googleapis.com/icon?family=Material+Icons+Sharp",
+        MaterialIconVariant::TwoTone => "https://fonts.googleapis.com/icon?family=Material+Icons+Two+Tone",
     };
     cx.render(rsx!(
         link { href: "{href}", rel: "stylesheet" }

src/self-hosted-styles.css

@@ -0,0 +1,38 @@
+/*
+This file is included at compilation as a format string.
+Therefore all curly braces must be escaped.
+ */
+
+@font-face {{
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url({}) format('opentype');
+}}
+
+.material-icons {{
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+}}