1

I'm currently building a VueJS single-page web app and I am self-hosting Material Icons as per this SO post. I am using webpack v3.6 to bundle my assets and using "prerender-spa-plugin": "^3.4.0" to pre-render some of my routes for SEO purposes.

The problem I am facing is that often times when I load my web app on mobile (namely iOS), the material icons will never load and remain in the following state. When this occurs, refreshing the page doesn't seem to resolve the issue. Often times, I will have to wait a period of time before opening a different browser and loading the same page for the icons to be properly loaded again. However, there are also occasions when the icons load successfully. What's more perplexing is that this issue seems to strictly affect me when I access my site on mobile (I haven't had a chance to test on Android since I only own an iOS device). I've never had this issue using any desktop browser. Am I self-hosting Material Icons incorrectly, which is why this is happening?

enter image description here

Below is the CSS in my _fonts.scss file. As you can see, I've installed "material-design-icons": "^3.0.1" via npm and my urls point to the font files within the "material-design-icons" package.

@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: 16px;  /* 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';
}

My app.scss file simply imports the _fonts.scss file in the following manner.

@import "fonts";
ptk
  • 6,835
  • 14
  • 45
  • 91

1 Answers1

0

Place this in your header:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

example:

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

official link. Material-icons

Manik Biradar
  • 1,294
  • 2
  • 9
  • 7
  • In addition to self-hosting? I considered this but i felt that loading the style sheet twice (once through self-hosting and again through CDN you’ve shared) might introduce other issues. Ideally I would just load the style sheet properly once but clearly something is wrong... – ptk Oct 10 '19 at 06:25
  • 1
    another way is, add below line in your style.css (or style.scss) @import "https://fonts.googleapis.com/icon?family=Material+Icons" – Manik Biradar Oct 10 '19 at 10:42