Categories
JavaScript Answers

How to host Material icons offline with JavaScript?

Spread the love

To host Material icons offline with JavaScript, we can install the material-icons-font package.

We install it by running

npm install material-icons-font --save

Then we add some @import statements into our SCSS code by writing

@import "~material-icons-font/sass/variables";
@import "~material-icons-font/sass/mixins";
$MaterialIcons_FontPath: "~material-icons-font/fonts";
@import "~material-icons-font/sass/main";
@import "~material-icons-font/sass/Regular";

to include the icon files.

Then we use it by writing

<i class="material-icons">face</i>
<i class="material-icons md-48">face</i>
<i class="material-icons md-light md-inactive">face</i>

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *