Material Design Icons Suddenly Stopped Working

Question

I have been working on a Cordova App, I have been testing with a Samsung SM-J700P.

My setup up for the Material Icons was basically this:

HTML -

<div id="alarm"><i class="material-icons">add_alert</i></div>

CSS -

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      url(./path/to/MaterialIcons-Regular.woff2) format(woff2),
      url(./path/to/MaterialIcons-Regular.woff) format(woff);
}

I have the Material Icons package saved locally in my project, so it shouldn't have any problem getting to the icons. This has been working for the entire time testing on this phone, until a couple days ago, I got an update on my SM-J700P. After which, none of my icons appear anymore. The current version of software on the phone is: J700PVPS1AQD1.

Because Cordova defaults to a chromium window on Android, I should only need the woff2 package for the icons, so I doubt that is the problem. I also have a weird error in my Android Studio console when I run the program.

E/libEGL: validate_display:225 error 3008 (EGL_BAD_DISPLAY)
I/OpenGLRenderer: Initialized EGL, version 1.4
W/AudioCapabilities: Unsupported mime audio/mpeg-L1
W/AudioCapabilities: Unsupported mime audio/mpeg-L2
//... Lots more Unsupported mime types which I don't understand...
E/chromium: [ERROR:interface_registry.cc(104)] Failed to locate a binder for interface: autofill::mojom::PasswordManagerDriver
More unsupported mime types...

I don't know how much those errors in the console matter, but they are also new since the update. The rest of the app works just fine, none of these errors crash it, it just won't display the Material Icons anymore.

Any Ideas?

Edit: Further information. If I just display the html file in my own chrome browser, the icons show up as normal. So it seems like maybe it's a problem with Cordova. I also tested the app with a Samsung S7 Edge, which also would not show the icons, so it doesn't seem to be phone dependant.

Answer 1

The answer was unsurprisingly simple. In the CSS, I forgot quotes.

So:

@font-face { 
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      url(../Path/To/MaterialIcons-Regular.woff2) format (woff2);
}

Should have been:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src:
      local('Material Icons'),
      local('MaterialIcons-Regular'),
      url(../Path/To/MaterialIcons-Regular.woff2) format ('woff2');
}

This is according to the Google documentation here

Answer 2

You forget the quotes here (after format) :

  url(../Path/To/MaterialIcons-Regular.woff2) format ('woff2');