0

I'm using some material icons in a web project.

Now the Google documentation states that the icon font for the web works specifically on retina displays (which by my understanding refers to Apple devices):

https://google.github.io/material-design-icons/#icon-font-for-the-web

Supported by all modern web browsers.

Vector-based: Looks great at any scale, retina displays, low-dpi display screens.

However it goes on to state:

The icon font contains 750+ icons and weighs in at only 40KB (woff2 format). In comparison, a ZIP file of these in SVGs will be more than 50% larger.

I am currently using the self hosted version of the icon font which only refers to the woff2 format and declares the font like so:

@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/v8/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

I then call the icons with ligatures: 

<i class="material-icons">face</i>

Now when the documentation and my web project are viewed using mobile Safari on iOS devices such as iPhone and iPad they do not display at all (the icons that do display are a different icon font):

Is there a way to resolve this issue? Does the .svg format need including for example?

m4n0
  • 29,823
  • 27
  • 76
  • 89
user1554264
  • 1,204
  • 3
  • 22
  • 47
  • Is your website itself a https site? – Mr Lister Nov 08 '15 at 12:29
  • No. Does that create a potential issue? – user1554264 Nov 08 '15 at 12:30
  • 2
    It could; loading mixed content is frowned upon. Is it possible to load the font through http rather than https? – Mr Lister Nov 08 '15 at 12:35
  • What an interesting fix. They now display on iOS. This has resolved the issue and can be submitted as an answer possibly? May I ask do you have any reputable resources that discuss mixed content conflicts/issues and why it is bad practice? – user1554264 Nov 08 '15 at 12:38
  • I can't seem to find any official documents; only about problemns in the other direction (loading http resources in a https page). [This SO question](http://stackoverflow.com/q/1105934/1016716) may provide some insight, but I think I'll leave the actual answering here to someone who can provide a real authoritative answer. – Mr Lister Nov 08 '15 at 13:21

0 Answers0