<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <!--기본 사용법 -->
  <i class="material-icons">apps</i>

  <!-- 사이즈 조절 -->
  <i class="material-icons md-36">apps</i>

  <!-- 사이즈 조절 + 컬러 변경 -->
  <i class="material-icons md-48 tomato">apps</i>
  
  <br>
  <br>
  <!-- 다양한 아이콘 -->
  <!-- https://fonts.google.com/icons -->
  <i class="material-icons">favorite</i>
  <i class="material-icons">settings</i>
  <i class="material-icons ">done</i>
  <i class="material-icons royalblue">home</i>
  <i class="material-icons tomato md-48">fingerprint</i>
</body>

/* COMMON */
.material-icons {
  color: color: rgba(0,0,0,0.87);
}
.material-icons.md-36 {
  font-size: 36px;
}
.material-icons.md-48 {
  font-size: 48px;
}
.material-icons.tomato {
  color: tomato;
}
.material-icons.royalblue {
  color: royalblue;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.