{"id":673,"date":"2020-11-10T12:18:40","date_gmt":"2020-11-10T11:18:40","guid":{"rendered":"https:\/\/nguenkam.com\/blog\/?p=673"},"modified":"2022-06-08T17:59:10","modified_gmt":"2022-06-08T15:59:10","slug":"how-to-host-material-icons-offline","status":"publish","type":"post","link":"https:\/\/nguenkam.com\/blog\/index.php\/2020\/11\/10\/how-to-host-material-icons-offline\/","title":{"rendered":"How to host material icons offline?"},"content":{"rendered":"\n<p>You surely would like your app to be able to display the icons even when the user does not have an internet connection. <\/p>\n\n\n\n<p>let\u00b4s say it differently : <\/p>\n\n\n\n<p>how do you use google material icons without a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;link href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\" rel=\"stylesheet\"&gt; <\/code><\/pre>\n\n\n\n<p>There is several approaches. But here are my favourite ones: <\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">First approach<\/span> :<\/h4>\n\n\n\n<ul><li>open the material icon source link: <strong><a href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\">https:\/\/fonts.googleapis.com\/icon?family=Material+Icons<\/a><\/strong><\/li><\/ul>\n\n\n\n<p>you will see this stylesheet code: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* fallback *\/\n@font-face {\n  font-family: 'Material Icons';\n  font-style: normal;\n  font-weight: 400;\n  src: url(https:\/\/fonts.gstatic.com\/s\/materialicons\/v67\/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');\n}\n\n.material-icons {\n  font-family: 'Material Icons';\n  font-weight: normal;\n  font-style: normal;\n  font-size: 24px;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  -webkit-font-feature-settings: 'liga';\n  -webkit-font-smoothing: antialiased;\n}<\/code><\/pre>\n\n\n\n<p>copy it  &amp; paste in the new file material-icons.scss<\/p>\n\n\n\n<ul><li>open the woff font url link:  https:\/\/fonts.gstatic.com\/s\/materialicons\/v67\/flUhRq6tzZclQEJ-Vdg-IuiaDs<\/li><\/ul>\n\n\n\n<p>and download the woff2 file.<\/p>\n\n\n\n<ul><li>Then I replace the woff2 file path with the new one in material-icons.scss file<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<ul><li>Then add the following to styles.css:<\/li><\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>@import \"material-icons\";<\/code><\/pre>\n\n\n\n<p><span class=\"has-inline-color has-black-color\"><strong>That makes thing works for me.<\/strong><\/span> \ud83d\ude42 <\/p>\n\n\n\n<p><\/p>\n\n\n\n<h4><span class=\"has-inline-color has-vivid-red-color\">Alternative: <\/span><\/h4>\n\n\n\n<p>First install the NPM:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm i material-icons<\/code><\/pre>\n\n\n\n<p>Then add the following to styles.css:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ import material icons\n@import '~material-icons\/iconfont\/material-icons.scss';<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>You surely would like your app to be able to display the icons even when the user does not have an internet connection. let\u00b4s say it differently : how do you use google material icons without a There is several approaches. But here are my favourite ones: First approach : open the material icon source [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1965,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[37],"tags":[40,131,130,129,132],"_links":{"self":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/673"}],"collection":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/comments?post=673"}],"version-history":[{"count":3,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/673\/revisions"}],"predecessor-version":[{"id":1974,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/posts\/673\/revisions\/1974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media\/1965"}],"wp:attachment":[{"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/media?parent=673"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/categories?post=673"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nguenkam.com\/blog\/index.php\/wp-json\/wp\/v2\/tags?post=673"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}