How do I leave the icon in line with the text?
.material-icons {
width: 24px;
overflow: hidden;
}
.material-icons.tiny {
font-size: 1rem;
width: 1rem;
overflow: hidden;
}
.material-icons.small {
font-size: 2rem;
width: 2rem;
overflow: hidden;
}
.material-icons.medium {
font-size: 4rem;
width: 4rem;
overflow: hidden;
}
.material-icons.large {
font-size: 6rem;
width: 6rem;
overflow: hidden;
}
.material-icons.extra-large {
font-size: 10rem;
width: 10rem;
overflow: hidden;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<h1><i class="material-icons medium">error</i>Ops...</h1>