Icons
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Material Icons</title>
<style>
.material-icons { font-size: 32px; color: #1976d2; }
</style>
</head>
<body>
<div class="app">
<i class="material-icons">cloud</i>
<button aria-label="Datei öffnen">
<span class="material-icons" aria-hidden="true">folder_open</span>
</button>
</div>
</body>
</html>
Symbols
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp">
<title>Material Symbols</title>
<style>
.material-symbols-outlined { font-variation-settings: 'wght' 100, 'FILL' 0; 'GRAD' -50, 'opsz' 48; font-size: 32px; }
.material-symbols-rounded { font-variation-settings: 'wght' 500, 'FILL' 0.5; 'GRAD' 0, 'opsz' 48; font-size: 48px; }
.material-symbols-sharp { font-variation-settings: 'wght' 700, 'FILL' 1; 'GRAD' 100, 'opsz' 48; font-size: 54px; }
</style>
</head>
<body>
<div class="app">
<span class="material-symbols-outlined">face</span>
<span class="material-symbols-rounded">face</span>
<span class="material-symbols-sharp">face</span>
</div>
</body>
</html>
Links