Electron Forge + Vue + Beufy で Material Design Icons を読み込めるようにするには

久しぶりに Beufy を使ってみると、デフォルトのアイコンセットが Material Design Icons になっていた。Beufy とは別にアイコンを読み込む必要があるのだが、Beufy のドキュメントに記載の手順では CDN で読み込むようになっている。そのままやってみても、Electron の制限で読み込みがブロックされている。

というわけで Material Design Icons のページで NPM で導入する方法を探したが、Webpack で使う方法がぱっと見たらない。結局下記のようにしたらいけた。

yarn add @mdi/font

でインストールし、renderer.js の冒頭に下記を追記。

import '@mdi/font/css/materialdesignicons.css'