7. iconos.html - Íconos oficiales

El sitio oficial de los íconos de Material Design es https://fonts.google.com/icons.
En el sitio oficial te aparecen los íconos en diferentes estilos.
Si seleccionas un ícono y su estilo, te aparecen las instrucciones de como añadirlo a tu código.

Salida


1	<!DOCTYPE html>
2	<html lang="es" class="light dark">
3
4	<head>
5
6	<meta charset="UTF-8">
7	<title>Íconos - PWA con MD</title>
8
9	<script src="js/registraServiceWorker.js"></script>
10
11	<meta name="viewport" content="width=device-width">
12	<meta name="theme-color" content="#fffbfe">
13	<link rel="icon" sizes="32x32" href="favicon.ico">
14	<link rel="manifest" href="site.webmanifest">
15	<script src="ungap/custom-elements.js"></script>
16
17	<script type="module" src="js/configura.js"></script>
18	<link rel="stylesheet" href="css/estilos.css">
19	<link rel="stylesheet" href="css/transicion_completa.css">
20
21	</head>
22
23	<body>
24
25	<md-top-app-bar>
26
27	<h1>Íconos</h1>
28
29	<button is="md-menu-button" slot="navigation"></button>
30
31	</md-top-app-bar>
32
33	<main>
34
35	<button type="button" class="md-standard-icon-button">
36	<span class="material-symbols-outlined">favorite</span>
37	</button>
38
39	<button type="button" class="md-standard-icon-button" disabled>
40	<span class="material-symbols-outlined">bolt</span>
41	</button>
42
43	<a class="md-standard-icon-button" target="_blank" rel="noreferrer"
44	href="https://google.com">
45	<span class="material-symbols-outlined">star</span></a>
46
47	<span class="material-symbols-outlined">thumb_up</span>
48
49	<button type="button" class="md-fab-primary"
50	style="position: fixed; bottom: 1rem; right: 1rem;">
51	<span class="material-symbols-outlined">add</span>
52	</button>
53
54	</main>
55
56	<nav-drw></nav-drw>
57
58	</body>
59
60	</html>