WordPressマテリアルテーマにてメニューボタンを以下の要領で画像化しております。

マテリアルテーマと言っているのは、このテーマで良いでしょうか。
https://wordpress.org/themes/material/

メニューの内容を、文字と画像でふたつ指定しておいて、スタイルシートでどちらを表示するかを切り替えれば良いと思います。

メニューのナビゲーションラベルのところには、以下のように書きます。

<span class="text">ホーム</span><img class="image" src="home.jpg">

文字を span でくくって、それぞれに class 属性を指定します。

テーマの style.css に以下を追記。

/* PC 用 */
.site-menu ul li a .text {
    display: none;
}
.site-menu ul li a .image {
    display: inline;
}

/* スマホ用 */
@media screen and (max-width: 768px) {
    .site-menu ul li a .text {
        display: inline;
    }
    .site-menu ul li a .image {
        display: none;
    }
}

上記では、横幅が 768 ピクセルよりも小さくなると、画像から文字に切り替わるようにしています。
切り替わる横幅は、好みで変えてください。
世間一般でよく使われる値は、というのは「CSS メディアクエリ ブレークポイント」というようなキーワードで検索すると情報が見つかります。

Material のテーマは、デフォルトのままであれば、class="site-menu" で囲まれた中にメニューがありますが、もし、この辺りをカスタマイズしているのであれば、前述のスタイルも変更が必要です。