Die feste Aktionsschaltfläche kann in Materialise CSS nicht zum Laufen gebracht werden

Ich folge einem Materialise CSS-Tutorial auf YouTube und folge den Anweisungen zum Erstellen eines FAB. Die Symbole werden jedoch nicht angezeigt, wenn ich zur Schaltfläche scrolle. Ich bin mir nicht sicher, warum das passiert.

Ich habe mich im Internet umgesehen und keine Lösung dafür gefunden. Es könnte ein Problem mit jQuery sein, aber ich habe den HTML-Setup-Code genau von der Materialise-Website kopiert und eingefügt.

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="fixed-action-btn">
 <a ref="#" class="btn-floating red btn-large">
 <i class="large material-icons">mode_edit</i>
 </a>
 <ul>
 <li><a ref="#" class="btn-floating blue btn-large"><i 
 class="large material-icons">insert_chart</i></a></li>
 <li><a ref="#" class="btn-floating green btn-large"><i 
 class="large material-icons">format_quotes</i></a></li>
 <li><a ref="#" class="btn-floating yellow btn-large"><i 
 class="large material-icons">publish</i></a></li>
 <li><a ref="#" class="btn-floating orange btn-large"><i 
 class="large material-icons">attach_file</i></a></li>
 </ul>
</div>

Lösung des Problems

Sie müssen materialise css und js einfügen, beide versuchen diesen Code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $('.fixed-action-btn').floatingActionButton();
 });
</script>