<body>
<h1 class="done"><span class="material-icons-outlined">done</span>文字の前にアイコンを入れた見出し</h1>
<h1 class="done_bg"><span class="material-icons-outlined">done</span>文字の前にアイコンを入れた見出し：アイコンに背景あり</h1>
<h1 class="br"><span class="material-icons-outlined">done</span>文字の前にアイコンを入れた見出し：改行したとき、余白をあけずにそのまま下に回り込む場合</h1>
<h1 class="br_left"><span class="material-icons-outlined">done</span>文字の前にアイコンを入れた見出し：改行したとき、そのまま回り込まずに左に余白を取る場合</h1>
</body>

<!-- google マテリアルアイコン -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone">
/* done */
h1.done{
  font-size:24px;
  line-height: 1.8;
}
h1.done span{
  margin-right:5px;
}
/* done_bg */
h1.done_bg{
  font-size:24px;
  line-height: 1.8;
}
h1.done_bg span{
  margin-right:5px;
  background:#000;
  color:#fff;
  border-radius:50%;
}
/* br */
h1.br{
  font-size:24px;
  line-height: 1.8;
}
h1.br span{
  margin-right:5px;
}
/* br_left */
h1.br_left{
  position:relative;
  padding-left:30px;
  font-size:24px;
  line-height: 1.8;
}
h1.br_left span{
  position: absolute;
  top: 10px;
  left: 0;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.