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">
3
4	<head>
5	<meta charset="UTF-8">
6	<meta name="viewport"
7	content="width=device-width">
8
9	<title>
10	Íconos - PWA con MD
11	</title>
12
13	<meta name="theme-color"
14	content="#fffbfe">
15	<link rel="icon" sizes="32x32"
16	href="favicon.ico">
17	<link rel="manifest"
18	href="site.webmanifest">
19
20	<link rel="stylesheet"
21	href="css/estilos.css">
22	<script
23	src="ungap/custom-elements.js">
24	</script>
25	<script type="module"
26	src="js/configura.js"></script>
27
28	</head>
29
30	<body>
31
32	<md-top-app-bar>
33
34	<h1>Íconos</h1>
35
36	<button is="md-menu-button"
37	slot="navigation"
38	onclick="nav.abre()"></button>
39
40	</md-top-app-bar>
41
42	<main>
43
44	<button type="button"
45	class="md-standard-icon-button">
46	<span
47	class="material-symbols-outlined">
48	favorite
49	</span>
50	</button>
51
52	<button type="button"
53	class="md-standard-icon-button"
54	disabled>
55	<span
56	class="material-symbols-outlined">
57	bolt
58	</span>
59	</button>
60
61	<a href="https://google.com"
62	class="md-standard-icon-button">
63	<span
64	class="material-symbols-outlined">
65	star
66	</span></a>
67
68	<span
69	class="material-symbols-outlined">
70	thumb_up
71	</span>
72
73	<button type="button"
74	class="md-fab-primary"
75	style="position: fixed;
76	bottom: 16px;
77	right: 16px;">
78	<span
79	class="material-symbols-outlined">
80	add
81	</span>
82	</button>
83
84	</main>
85
86	<nav-drw id="nav"></nav-drw>
87
88	</body>
89
90	</html>