Значки материалов просто отображают текст, React Materialize

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

Я пытаюсь добавить значки, например, на экране входа в систему у меня есть маленький значок человека рядом с полем ввода имени пользователя, но он просто отображает «ACCOUNT_USER» или на кнопке отправки, я хочу показать значок с именем отправить, но он просто отображает «ОТПРАВИТЬ». Вот пример кода.

          <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, но было бы глупо загружать 91 КБ файлов значков для программы нет. ? Надеюсь, есть лучшее решение