Как сделать loading для иконок?

Использую material design icons, подключаю шрифт так:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20,100,0,-25&display=swap" rel="stylesheet">

Использую иконки так: <span class="material-symbols-outlined">colors</span>

Проблема в том, что при загрузке страницы не всегда иконки показываются сразу, а показывается текст. Можно ли это как-то решить? Допустим, сделать их прозрачными на момент загрузки. Передавать разные атрибуты в link уже пробовал, все равно не помогает. Если установить их шрифт локально, эта проблема также не пропадает :/