VueにてSPAを構築していますが、Googleマテリアルアイコンを表示させる方法を教えていただきたいです

Question

前提・実現したいこと

初心者の質問で恐縮ですが、回答いただけますと幸いです。
Vue Routerで、SPAを構築しようとしています。
Googleマテリアルアイコンを読み込んで、アイコンを表示させようとしています。
vuetifyは利用せずに実現したいです。

発生している問題・エラーメッセージ

index.htmlでマテリアルアイコンの読み込みをさせて、
各vueファイルにてアイコンを表示させようとしていますが、
文字化けして表示を行えません。

該当のソースコード

<index.html>
・・・

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.5.55/css/materialdesignicons.min.css" rel="stylesheet">

・・・

<BookSearch.vue>
・・・

<button
class="button-base button-fab-add mt-16"
@click="addBookList(index)">
</button>

・・・

<_button.scss>
.button-fab-add {
width: 32px;
height: 32px;
border: 0 solid;
border-radius: 40px;
background-color: $color-primary;
box-shadow: 0 0 5px #000000ee;

&::after {
    content: "\e145";
    font-family: 'Material Icons';
    color: #fff;
    font-size: 1.5rem;
}

}

試したこと

最初は

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> としていましたが、 これを”該当のソースコード”の内容に修正したところ 一時正常に表示されたのですが、突然また文字化けするようになってしまいました。 （特に何もいじっていないはずです）

補足情報（FW/ツールのバージョンなど）

"vue": "^2.6.11",
"vue-router": "^3.2.0"

Answer 1

font-familyの部分でフォントの名前が違うため、起きている現象だと思います。

.hoge {
  font-family: "Material Design Icons"; /* 'Material Icons'; ではなく、'Material Design Icons'*/
}

https://pictogrammers.github.io/@mdi/font/5.5.55/

画像の青枠部分

Comments

[ma-3]

jackmiwamiwaさん
ご回答ありがとうございます!
修正して試してみましたが文字化けしたままでした。。