Значки материалов просто рендеринг текста, Реактивизировать

Question

В данный момент работаю над групповым проектом для класса.Он использует React и MaterializeCss на передней панели.

Я пытаюсь добавить значки, например, на экране входа в систему У меня есть маленький значок рядом с полем ввода имени пользователя, но он просто отображает «ACCOUNT_USER»или на кнопке отправки я хочу показать иконку с именем send, но на ней просто отображается «SEND»Вот пример кода.

          <div className="row">
            <div className="input-field col s6 offset-m3">
              <i className="material-icons prefix">account_circle</i>
              <input id="username" type="text" className="validate" />
              <label htmlFor="username">Username</label>
            </div>

Прежде чем кто-либо скажет мне использовать строку CDN от https://materializecss.com/getting-started.html, у меня уже есть.

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Кто-нибудь знает, в чем может быть проблема?В настоящее время программа работает локально, и я прочитал, что это может быть проблемой с материализацией, и единственное очевидное решение, которое я нашел до сих пор, - это загрузить пакет значков из Google, но было бы глупо загружать файлы значков 91k для программы no.?Надеюсь, есть лучшее решение