font-lazy-load

material icon 如果是用 font 的方式引用的話，在 client 會常常有文字先出現在跑出 icon 的問題，

所以需要在 loading 完的時候才可以把，icon visible

使用 webfontloader 的套件

npm i webfontloader

if (config.isBrowser) {
// https://github.com/naopoyo/angular-webfontloader-example/blob/master/src/app/app-init.service.ts
// 由於 webfontloader 在 import 的時候就會直接執行 js , 會遇到 window undefined 的情況，
//所以要在 browser 的時候才 import js
import('webfontloader').then((WebFont) => {
    WebFont.load({
        custom: {
            families: ['Material Icons', 'Material Icons Outline'],
        },
    });
});
}

.material-icons-outlined,
.material-icons {
    visibility: hidden;
}

html.wf-active {
    .material-icons,
    .material-icons-outlined {
        visibility: visible;
    }
}