How to host material icons offline?
Solution 1
Method 2. Self hosting Developer Guide
Download the latest release from github (assets: zip file), unzip, and copy the font folder, containing the material design icons files, into your local project -- https://github.com/google/material-design-icons/releases
You only need to use the font folder from the archive: it contains the icons fonts in the different formats (for multiple browser support) and boilerplate css.
- Replace the source in the url attribute of
@font-face
, with the relative path to the iconfont folder in your local project, (where the font files are located) eg.url("iconfont/MaterialIcons-Regular.ttf")
@font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */ src: local('Material Icons'), local('MaterialIcons-Regular'), url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), url(iconfont/MaterialIcons-Regular.woff) format('woff'), url(iconfont/MaterialIcons-Regular.ttf) format('truetype'); } .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'; }
<i class="material-icons">face</i>
NPM / Bower Packages
Google officially has a Bower and NPM dependency option -- follow Material Icons Guide 1
Using bower : bower install material-design-icons --save
Using NPM : npm install material-design-icons --save
Material Icons : Alternatively look into Material design icon font and CSS framework for self hosting the icons, from @marella's https://marella.me/material-icons/
Note
It seems google has the project on low maintenance mode. The last release was, at time of writing, 3 years ago!
There are several issues on GitHub regarding this, but I'd like to refer to @cyberalien comment on the issue
Is this project actively maintained? #951
where it refers several community projects that forked and continue maintaining material icons.
Solution 2
I'm building for Angular 4/5 and often working offline and so the following worked for me. First install the NPM:
npm install material-design-icons --save
Then add the following to styles.css:
@import '~material-design-icons/iconfont/material-icons.css';
Solution 3
The upper approaches does not work for me. I download the files from github, but the browser did not load the fonts.
What I did was to open the material icon source link:
https://fonts.googleapis.com/icon?family=Material+Icons
and I saw this markup:
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.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;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
I open the woff font url link https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2
and download the woff2 file.
Then I replace the woff2 file path with the new one in material-icons.css
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
/* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
/* load new file */
url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}
That makes thing works for me.
Solution 4
As of 2020, my approach is to use the material-icons-font package. It simplifies the usage of Google's material-design-icons package and the community based material-design-icons-iconfont.
Install the package.
npm install material-icons-font --save
-
Add the path of the package's CSS file to the style property of your project's angular.json file.
... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...
-
If using SCSS, copy content below to the top of your styles.scss file.
@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';
-
Use the icons in the HTML file of your project.
// Using icon tag <i class="material-icons">face</i> <i class="material-icons md-48">face</i> <i class="material-icons md-light md-inactive">face</i> // Using Angular Material's <mat-icon> tag <mat-icon>face</mat-icon> <mat-icon>add_circle</mat-icon> <mat-icon>add_circle_outline</mat-icon>
Icons from @angular/material tend to break when developing offline. Adding material-icons-font package in conjunction with @angular/material allows you to use the tag while developing offline.
Solution 5
If you use webpack project, after
npm install material-design-icons --save
you just need to
import materialIcons from 'material-design-icons/iconfont/material-icons.css'
Luke Tan
Updated on July 08, 2022Comments
-
Luke Tan almost 2 years
My apologies if this is a very simple question, but how do you use google material icons without a
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
?
I would like my app to be able to display the icons even when the user does not have an internet connection
-
Luke Tan almost 8 yearsHow would you do this for a phone GAP app where you would not have a domain?
-
bfmags almost 8 yearstarget your local folder in the source url of @font-face : url( "iconfont/MaterialIcons-Regular.woff2" -- updated answer
-
David over 6 yearsThanks! I had the same issue and this fixed it for me.
-
Kaloyan Stamatov over 6 yearsI solve my issue with this approach, but later I found another git repo, from where I get the proper release.
-
keemor over 6 yearsI don't recommend doing this, this repo is far too big, use one desc. below npmjs.com/package/material-design-icons-iconfont I also noticed that browser will cache fonts.googleapis.com/icon?family=Material+Icons and it'll work in the offline mode. Checkout keemor.github.io/#
-
Suat Atan PhD over 6 yearsI am newbie in npm can you elaborate
import materialIcons from 'material-design-icons/iconfont/material-icons.css'
. We adding this line to where? app.js or somewhere else. I am using framework7 with Vue and I tried. It didn't work for me. -
Vladislav Kosovskikh over 6 years@SuatAtanPhD you add this import like any other style imports. If you use webpack you need something like style-loader, css-loader and you can place this import anywhere in your js code, for example in index.js or app.js etc.
-
TheBAST over 6 yearsHey, Can you please make an updated answer of this. I have downloaded my mdl icons with npm.
-
Yurii Bratchuk about 6 yearsSuch approach is recommended for building an corporate web application which may work in internal network without access to Internet
-
Sergio Cabral almost 6 yearswhen call "npm install" wait wait wait lol... but works after long time
-
securecurve over 5 yearsSolved my problem … I just wanted to note out that we only need the
iconfont
folder from the whole archive. -
Alfa Bravo over 5 years@SergioCabral Luckily you made the comment about waiting, cause there were about 5 times I thought this install isn't going anywhere... :)
-
xaviert over 5 yearsDoesn't work on all browsers, see this SO answer for more information: stackoverflow.com/questions/11002820/…
-
Yordan Georgiev over 5 yearsfor this type of "move cdn resource to be served locally" it usually would pay off to have a solid over 3000 requests average response time data BEFORE and AFTER the change - you would be surprised how-often it is not worth it, regardless of your effort to achieve it ...
-
Ali Jamal over 5 yearsThank You Loved It This Is Best Solution Thank You <3
-
Yuri over 5 yearsEmploying the material-design-icons-iconfont package works even with the Angular's standard
mat-icon
component. Thus the transition is seamless. -
Jason Allshorn over 5 yearsI got this to work also with some small changes. I changed "workboxSW" to "workbox". I changed "router" to "routing" and added this code into my sw_config.js file that gets generated when using the workbox cli wizard.
-
Grashopper almost 5 years@ Kaloyan Stamatov would be nice to share that git repo.. since lot of people have issue with outdated official repo :)
-
Kaloyan Stamatov almost 5 years@Grashopper, I do not have it anymore. Sorry
-
yehonatan yehezkel almost 5 yearsthis package not exist any more
-
Wlada almost 5 yearswith angular cli, do npm install material-design-icons and then add css in angular.json -> architect->build->styles
-
Aupr almost 5 yearsWorking for me also... :)
-
Wlada almost 5 yearsI'm having a problem with PWA. Icons are working while you are in browser but once you add shortcut on home screen and run the app icons are not showing.
-
compt almost 5 yearsmore up to date in 2019, this solution worked for me as well.
-
Ade over 4 yearsThis is the solution that worked for me, except the stylesheet link in index.html didn't work - I had to add an import into my Styles.scss file:
@import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
Then my locally hosted icons leapt into life -
wutzebaer over 4 yearsany idea how to add outlined icons?
-
Reuben Sivan almost 4 yearsI followed the npm directions above and all works great, except I am missing two icons: toggle_off and toggle_on. I suspect the npm repo might not be up to date?
-
Reuben Sivan almost 4 yearsIt turns out the google repository is not well maintained. The solution I found is to use npm install material-design-icons-iconfont, a fork of the google repository with many fixes and performance improvements.
-
BoDeX almost 4 yearsthis is the only way to get the latest icons that I could find...
-
Welyngton Dal Prá over 3 years404 on your link
-
Timelot over 3 yearsin 8/2020 latest v55 link: fonts.gstatic.com/s/materialicons/v55/…
-
Mike Goodstadt over 3 yearsSimple and clean implementation - works perfectly thank you! As the most current and efficient solution, this should be be the accepted answer...
-
steve dunning over 3 yearsAlso, importing into your scss means that it is a build time dependency and you can NPM install --dev to not make it part of the prod node environment footprint.
-
Arokia Lijas about 3 yearsIs there a way that I can use <mat-icon>face</mat-icon> offline ie., without changing to <i class="material-icons">face</i>
-
omostan about 3 yearsI couldn't agree more with @Mike. This is the best implementation. Thank you for sharing!
-
Christoph B over 2 yearsWhen I use npm install it takes a long time, and then adds no new files to my AspNetCore project. Did anyone have a similar problem?
-
Shaybc over 2 yearsi had to install npm package
npm i material-design-icons
then edited:apps\appName\src\styles.css
and added the content of the file:\node_modules\material-design-icons\iconfontmaterial-icons.css
but i had to change the fonts path to be of this format:url('~material-design-icons/iconfont/MaterialIcons-Regular.woff2')
(added the qutes ' and prefix:~material-design-icons/iconfont/
before each file name ) -
moefinley about 2 years@Shaybc check the date on the npm package. It's old! It's best to get the fonts directly from Google fonts as Kaloyan says above. Or you can get them from GitHub.
-
Omar Amaoun about 2 yearsThe simpliest way, thank you for sharing :)