Google Fontsのマテリアルアイコンの使い方

https://fonts.google.com/icons?icon.size=24&icon.color=%23000000&icon.platform=web&icon.query=Arrow&selected=Material+Symbols+Outlined:arrow_forward_ios:FILL@0;wght@100;GRAD@-25;opsz@24

読み込みタグ


<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Sharp|Material+Icons+Two+Tone" rel="stylesheet">

疑似要素で


.class::before {
  font-family: 'Material Icons';
  content: 'e8dc';
}

Font-familyで表示できなかったりするので注意

/* Filled */
font-family: 'Material Icons';

/* Outlined */
font-family: 'Material Icons Outlined';

/* Rounded */
font-family: 'Material Icons Round';

/* Sharp */
font-family: 'Material Icons Sharp';

/* Two Tone */
font-family: 'Material Icons Two Tone';