Estaba haciendo un mini-proyecto personal, y al colocar un símbolo que tenga texto al lado sale de la siguiente forma:
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="grid-item cuatro">
<h1><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">info</i> Hola</h1>
<p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i> Hola1<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;"> play_arrow</i> Hola2 <i class="material-icons" style="font-size:36px; color: DarkSlateBlue">play_arrow</i> Hola3 </p>
<p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola4<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i> Hola 5 </p>
<p><i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola6<i class="material-icons" style="font-size:36px; color: DarkSlateBlue;">play_arrow</i>Hola 7</p>
</div>
</body>
</html>
¿Cómo se podría conseguir alinear el texto con la etiqueta <i>
?
He estado buscando, pero solo encontraba cómo alinear con imágenes, pero al no ser una imagen, no funcionaba.
Gracias por su atención