You surely would like your app to be able to display the icons even when the user does not have an internet connection.
let´s say it differently :
how do you use google material icons without a
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
There is several approaches. But here are my favourite ones:
First approach :
- open the material icon source link: https://fonts.googleapis.com/icon?family=Material+Icons
you will see this stylesheet code:
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v67/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
copy it & paste in the new file material-icons.scss
- open the woff font url link: https://fonts.gstatic.com/s/materialicons/v67/flUhRq6tzZclQEJ-Vdg-IuiaDs
and download the woff2 file.
- Then I replace the woff2 file path with the new one in material-icons.scss file
- Then add the following to styles.css:
@import "material-icons";
That makes thing works for me. đŸ™‚
Alternative:
First install the NPM:
npm i material-icons
Then add the following to styles.css:
// import material icons
@import '~material-icons/iconfont/material-icons.scss';