ボタンをテキストフォントではなくアイコンフォントにしたい。

material icons とは

公式サイト

Material Design は Google が提唱しているデザインシステムのことで、その一部として、マテリアルアイコンが配布されています。
オープンソースのため、商標に使用する目的でもない限りは、ほぼ自由に使用できます。

導入方法

htmlのhead要素にマテリアルアイコンを利用するための記述をする。

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

head要素内に記述を追加します。
下記のURLからソースコードを取得。

導入したいアイコンを選んでソースコードをコピーする。

下記のサイトから使用したいアイコンを選び、画面左の<span>~</span>を全てコピーする。

使用したい箇所にソースコードを挿入する。

<div class="sp-menu">
 <span class="material-icons">menu</span>
</div>

配置の調整などは、適宜する必要がありますが、こんな感じで表示できる。