Material-components-web: Material Icons are not being rendered on Safari 8 in iOS 8.1 (i.e iPhone 4s)

[Arwany]

Bug

What MDC-Web Version are you using?

ALL Versions

What browser(s) is this bug affecting?

Safari on iOS 8.1

What OS are you using?

iOS 8.1 on iPhone 4s

What are the steps to reproduce the bug?

Just open the page, no material icons are being rendered.

What is the expected behavior?

To see icons not text.

What is the actual behavior?

I am getting texts in place of icons.

Any other information you believe would be useful?

Just an example of the problem.

[traviskaufman]

This is happening because we use ligatures for our icon fonts, which Safari <9.1 doesn't support. TBH, we've discussed switching away from ligatures in the past, so we should just use this as an opportunity to do so. However, we also _technically_ don't support Safari 8, since our policy is to support the last two major versions of every browser, which is 9 and 10. Our README currently doesn't reflect this, so we need to update that as well.

Work involved:

• [ ] Switch demos to use codepoints rather than ligatures
• [ ] Modify all component READMEs which use icon fonts to use codepoints instead of ligatures

[shyndman]

Looks like Safari 5+ supports ligatures through text-rendering: optimizeLegibility. I tested on desktop Safari 8 and confirmed that the icons render. I'm not sure whether this extends to mobile Safari, but I'd be surprised if it didn't.

@Arwany, could you visit material.io/icons and confirm that icons are not rendering? If they don't, I'll keep digging.

[shyndman]

Caniuse suggests ligatures should work as far back as Mobile Safari 4.3:
http://caniuse.com/#feat=kerning-pairs-ligatures

[Arwany]

@shyndman It doesn't look any different.

[shyndman]

It doesn't look as if your browser is downloading any web fonts. The header (where it says "ICONS") should be styled in Roboto Mono, but isn't. Any idea why that might be?

[Arwany]

I have no idea, but this is the same results I get on the actual iPhone 4s with Safari 8 as well.

[shyndman]

Thanks for trying that. I'm grabbing a simulator so I can repro.

[shyndman]

I've reproduced. Looks like the server is sending back woff2s instead of woff. Can I get the user agent of the physical device you're using?

[shyndman]

Here's why I ask. Turns out the iOS 8.1 simulator has a bug where it mis-reports the OS as being v10.12.2. This version is used to determine what font format to send to the browser. I don't believe that real live iPhones are affected in the same way, so if you aren't seeing icons, it's likely another issue.

[Arwany]

This is the website from a iPhone 4s, which also confirms the issue on real iPhones.

[Arwany]

Here is the User Agent as well:

Mozilla/5.0 (iPhone; CPU iPhone OS 9_3_2 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13F69 Safari/601.1

[shyndman]

Thanks @Arwany. I'll take a look.

[BBosman]

Just for reference, browsing to material.io/icons on an iPhone 4 running iOS 7.1.2. does show the icons.

[carloscasal]

Has this been solved? :)

[evaleirasclapps]

Was this solved?

[waaronking]

We're experiencing the same problem in iOS and Safari

[jasonvillalon]

not working on my end safari 11.1.2, its just showing letters

[kfw9257]

We're experiencing the same issue

[Wouter8]

Still open after a year?

[jeremiahlachica]

This solution worked for me:
https://stackoverflow.com/questions/36044052/materialize-css-icons-doesnt-show-up-in-safari-browser

[acdvorak]

Thanks for the feedback, everyone!

We only support browser versions N and N-1, so Safari 8 is no longer supported by MDC.
I'm not able to reproduce this in iOS 11 or 12 (physical device or simulator).

If you're still seeing it in a supported browser, feel to reopen, and please include the following:

1. Which component(s) exhibit the problem (e.g., mdc-button, mdc-icon-button, mdc-top-app-bar, mdc-textfield, or "everything with a material-icons class")
2. A public URL to verify and troubleshoot (e.g., Catalog, CodePen, screenshot test)

Thanks! 😀

[JonCatmull]

Hi, @acdvorak

I'm getting this Safari desktop in Version 12.0.3 (14606.4.5) I'm running macOS 10.14.3

The icon font is not rendering and then pushing my button content off the screen.

[JonCatmull]

Ok seems adding font-feature-settings: 'liga' to .material-icons class fixes it.

[javierpal]

already put this thing font-feature-settings: 'liga'; in the .material-icons class, but still does not work.

[shekhaua]

I've reproduced. Looks like the server is sending back woff2s instead of woff.

I was facing the same issue on iOS 13.3 (simulator).
Placing the url("../fonts/MaterialIcons-Regular.woff") format('woff')
before
url("../fonts/MaterialIcons-Regular.woff2") format('woff2') in font declaration fixed the issue:

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url("../fonts/MaterialIcons-Regular.eot"); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url("../fonts/MaterialIcons-Regular.woff") format('woff'), < -----
url("../fonts/MaterialIcons-Regular.woff2") format('woff2'), <-----
url("../fonts/MaterialIcons-Regular.ttf") format('truetype');
}