material-iconsをローカルから読み込んで使う備忘録

Material-iconをローカルで使う

アイコンデータをダウンロード

material-icons.woff2

ファイルに保存

material-icons.woff2として保存する

CSSから読み込み

material-icons

@font-face {
  font-family: Material Icons;
  font-style: normal;
  font-weight: 400;
  src: url(../font/material-icons.woff2) format('woff2');
}
.material-icons {
  font-family: Material Icons;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
}

通常の使い方で

<i class="material-icons">place</i>