Как решить проблему со шрифтом Material+Icons?

Question

[grabbee]

Использую шрифт 'https://fonts.googleapis.com/icon?family=Material+Icons' для иконок на кнопках. И почти всегда, пока он не загрузится, вместо иконок их названия тапи
* crop_free
* report
* find_in_page

Иконка должна занимать один символ, а там целая строка find_in_page
И висеть будет секунд по 10 пока не загрузится шрифт

Что делать?

Comments

[WapSter]

Можно использовать код иконки, тогда там будет квадрат пока не загрузится шрифт. Ещё скрыть ее при помощи css, и с помощью js отследить загрузку шрифта, затем показывать иконку.

[Steppp]

max-width: 20px допустим иконки!

И было бы не плохо,посмотреть как вы подключаете шрифты! 10 сек это очень долго!

[Steppp]

Еще делают прелоадер для сайта)

[grabbee]

{ rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }, nuxt генерит страницу и это в head ставит

[grabbee]

font-display: fallback; - можно ли как те использовать? Может существует какойто безсимвольныый шрифт