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
This question is related to
javascript
html
cordova
materialize
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.
I have tried to compile everything that needs to be done for self-hosting icons in my answer. You need to follow these 4 simple steps.
Open the iconfont folder of the materialize repository
link- https://github.com/google/material-design-icons/tree/master/iconfont
Download these three icons files ->
MaterialIcons-Regular.woff2 - format('woff2')
MaterialIcons-Regular.woff - format('woff')
MaterialIcons-Regular.ttf - format('truetype');
Note- After Download you can rename it to whatever you like.
Now, go to your CSS and add this code
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(MaterialIcons-Regular.woff2) format('woff2'),
url(MaterialIcons-Regular.woff) format('woff'),
url(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';
}
_x000D_
Note : The address provided in src:url(...) should be with respect to the 'CSS File' and not the index.html file. For example it can be src : url(../myicons/MaterialIcons-Regular.woff2)
<i class="material-icons">face</i>
_x000D_
Click here to see all the icons that can be used.
Install npm package
npm install material-design-icons --save
Put css file path to styles.css file
@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";
After you have done npm install material-design-icons
, add this in your main CSS file:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
url(~material-design-icons/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';
}
By the way there is video available on youtube with step by step instructions.
These are the steps. Download materialize icon package from https://github.com/google/material-design-icons/releases
Copy the icon-font folder and rename it to icons.
Open the materialize.css file and update the following paths:
a. from url(MaterialIcons-Regular.eot) to url(../fonts/MaterialIcons-Regular.eot) b. from url(MaterialIcons-Regular.woff2) format('woff2') to url(../fonts/MaterialIcons-Regular.woff2) format('woff2') c. from url(MaterialIcons-Regular.woff) format('woff') to url(../fonts/MaterialIcons-Regular.woff) format('woff') d. from url(MaterialIcons-Regular.ttf) format('truetype') to url(../fonts/MaterialIcons-Regular.ttf) format('truetype')
Everything will work like magic !
2019 Update here:
To self host your material icons, the Regular ones, Rounded, Sharp, all the variants. Go get them from this repo: https://github.com/petergng/material-icon-font
For some reason I dont know why these fonts are not easily accessible from Google repositories.
But here you go.
After downloading the package, go to bin folder and you'll see the four variants. Of course, it is up to you to use whichever.
To use them, create a css file and
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
src: local('Material-Icons-Regular'),
url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
src: local('Material-Icons-Round'),
url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
url(./icons/round/Material-Icons-Round.woff) format('woff'),
url(./icons/round/Material-Icons-Round.svg) format('svg'),
url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
src: local('Material-Icons-Sharp'),
url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}
The url
will link to where the icons are located in your project.
.material-icons-outlined, .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;
}
This will make both
.material-icons-outlined,
and
.material-icons
classes use the same defaults.
If you want to to use .material-icons-sharp
, just append it to the two class names.
.material-icons {
font-family: 'Material Icons';
}
.material-icons-outlined {
font-family: 'Material Icons Outline';
}
Again, to use more variant, like Sharp, just add its block like the two above.
Once done...go to your html and use your newly minted icons.
<i class="material-icons-outlined">hourglass_empty</i>
<i class="material-icons">phone</i>
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'
I solved it using this package (@mdi/font) and importing it on main.js:
import '@mdi/font/css/materialdesignicons.css'
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';
My recipe has three steps:
to install material-design-icons package
npm install material-design-icons
to import material-icons.css file into .less or .scss file/ project
@import "~/node_modules/material-design-icons/iconfont/material-icons.css";
to include recommended code into the reactjs .js file/ project
<i className='material-icons' style={{fontSize: '36px'}}>close</i>
This may be an easy Solution
Get this repository that is a fork of the original repository Google published.
Install it with bower or npm
bower install material-design-icons-iconfont --save
npm install material-design-icons-iconfont --save
Import the css File on your HTML Page
<style>
@import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>
or
<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
Test: Add an icon inside body tag of your HTML File
<i class="material-icons">face</i>
If you see the face icon, you are OK.
If does not work, try add this ..
as prefix to node_modules
path:
<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">
Full disclosure, I'm the author of this package
Google's material-design-icons project is on low maintenance and out of date for a while. There's a gap between the version in https://material.io/icons/ and the version in material-design-icons.
I've created material-design-icons-iconfont to address these major issues:
npm install
- all irrelevant svg/xml/... files has been removedGoogle Fonts
CDN npm
npm install material-design-icons-iconfont --save
It depends on how you pack your web application (webpack
/gulp
/bower
/...), you'll need to import the .css
/.scss
file (and might change the relative fonts path)
Import Using SCSS
Import in one of your sass files
$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';
Later on, reference your desired icon <i class="material-icons">
+ icon-id + </i>
<i class="material-icons">contact_support</i>
It comes with a light demo page to assist searching and copy-pasting fonts
npm install material-design-icons
and
@import '~material-design-icons/iconfont/material-icons.css';
worked also for me with Angular Material 8
With angular cli
npm install angular-material-icons --save
or
npm install material-design-icons-iconfont --save
material-design-icons-iconfont is the latest updated version of the icons. angular-material-icons is not updated for a long time
Wait wait wait install to be done and then add it to angular.json -> projects -> architect -> styles
"styles": [
"node_modules/material-design-icons/iconfont/material-icons.css",
"src/styles.scss"
],
or if you installed material-desing-icons-iconfont then
"styles": [
"node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
"src/styles.scss"
],
The question title asks how to host material icons offline but the body clarifies that the objective is to use the material icons offline (emphasis mine).
Using your own copy of the material icons files is a valid approach/implementation. Another, for those that can use a service worker is to let the service worker take care of it. That way you don't have the hassle of obtaining a copy and keeping it up to date.
For example, generate a service worker using Workbox, using the simplest approach of running workbox-cli and accepting the defaults, then append the following text to the generated service worker:
workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
cacheName: 'googleapis',
cacheExpiration: {
maxEntries: 20
},
cacheableResponse: {statuses: [0, 200]}
})
);
You can then check it was cached in Chrome using F12 > Application > Storage > IndexedDB and look for an entry with googleapis in the name.
On http://materialize.com/icons.html the style header information you include in the page,you can go to the actual Hyperlink and make localized copies to use icons offline.
Here's how.NB: You will download two Files in all icon.css and somefile.woff.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
.
Save page as whatever_filename.css. Default is icon.css
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)
https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2
. Your browser will automatically download it. Save it in your CSS folder.
You should now have the two files icon.css and 2fcrYFNa....mY.wof22, save them both in your css. Now make edits in your css header location to the icon.css in your directories. Just make sure the .woff2 file is always in the same folder as the icon.css. Feel free to edit the long file names.
Kaloyan Stamatov method is the best. First go to https://fonts.googleapis.com/icon?family=Material+Icons. and copy the css file. the content look like this
/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v37/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;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
}
Paste the source of the font to the browser to download the woff2 file https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Then replace the file in the original source. You can rename it if you want No need to download 60MB file from github. Dead simple My code looks like this
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(materialIcon.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;
}
while materialIcon.woff2 is the downloaded and replaced woff2 file.
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.
Added this to the web config and the error went away
<system.webServer>
<staticContent>
<remove fileExtension=".woff" />
<mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
<remove fileExtension=".woff2" />
<mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
</staticContent>
Source: Stackoverflow.com