<ul class="icon">
  <li><span class="material-icons-outlined">cake</span>ショートケーキ</li>
  <li><span class="material-icons-outlined">cake</span>オペラ</li>
  <li><span class="material-icons-outlined">cake</span>フルーツタルト</li>
  <li><span class="material-icons-outlined">cake</span>シュヴァルツヴェルダー・キルシュトルテ</li>
</ul>


<!-- 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">
/* style reset */
ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

/* icon */
.icon li{
  position:relative;
  padding-left: 20px;
  margin-bottom: 10px;
}
.icon li .material-icons-outlined{
  position: absolute;
  top: 2px;
  left: 0;
  font-size: 16px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.