投稿日： 2019年10月19日
最終更新日： 2023年3月28日

【Vue-CLI 3系】Quasarでアイコンが表示されない場合の原因と解決方法まとめ【マテリアルアイコン/FontAwesame/MDI】

YouTubeも見てね♪

ねこじゃすり

ワタオカねこじゃすりライトグレー

created by Rinker

PEPPY(ペピイ)

¥3,850 (2024/04/03 21:33:13時点 Amazon調べ-詳細)

猫を魅了する魔法の装備品！

Anker PowerCor

Anker PowerCore モバイルバッテリー 20000mAh iPhone iPad Android

created by Rinker

Anker

¥4,990 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

旅行には必須の大容量モバイルバッテリー！

【最新機種】GoPro hero11 Black

【日本国内正規品】 GoPro hero11 Black

created by Rinker

GoPro(ゴープロ)

¥62,000 (2024/04/03 21:42:08時点 Amazon調べ-詳細)

最新機種でVlogの思い出を撮影しよう！

ドラゴンクエストメタリックモンスターズギャラリーメタルキング

created by Rinker

スクウェア・エニックス(SQUARE ENIX)

¥3,250 (2024/04/03 21:42:09時点 Amazon調べ-詳細)

みんな大好き経験値の塊をデスクに常備しておこう！

Bauhutte ( バウヒュッテ ) 昇降式 L字デスクブラック BHD-670H-BK

created by Rinker

Bauhutte(バウヒュッテ)

¥14,935 (2024/04/03 21:42:10時点 Amazon調べ-詳細)

メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！

BANDAI SPIRITS ULTIMAGEAR 遊戯王千年パズル 1/1スケール

created by Rinker

BANDAI SPIRITS(バンダイスピリッツ)

¥7,500 (2024/04/03 21:42:14時点 Amazon調べ-詳細)

もう一人の僕を呼び覚ませ！！

サンディスク microSD 128GB

サンディスク microSD 128GB UHS-I Class10 Nintendo Switch SanDisk Ultra SDSQUA4-128G-EPK

created by Rinker

SanDisk

¥1,856 (2024/04/03 21:33:16時点 Amazon調べ-詳細)

スマホからSwitchまで使える大容量MicroSDカード！

1 アイコンが出ない助けて！！！
- 1.1 表示されない
- 1.2 原因
2 手順
- 2.1 前提
- 2.2 quasar.tsの修正
  - 2.2.1 確認
3 終わりに

アイコンが出ない助けて！！！

表示されない

Quasarを使ってWebシステムやサイトを構築している際に、ドキュメントに「マテリアルアイコン以外にもFontAwesameやMDIなどをサポートしているよ！」という記載があったので使ってみようと思ったところ表示されませんでした。

The QIcon component allows you to easily insert icons within other components or any other area of your pages. Quasar currently supports: Material Icons , Font Awesome, Ionicons, MDI, Eva Icons and Themify Icons.Icon | Quasar Framework

<template>
  <q-layout view="lHh Lpr lFf">
    <q-page-container>
      <div>
        <p>
          <span>マテリアルアイコン:</span>
          <q-icon name="thumb_up" />
        </p>
        <p>
          <span>FontAwesame:</span>
          <q-icon name="fas fa-ambulance" />
        </p>
        <p>
          <span>MDI:</span>
          <q-icon name="mdi-alert-circle-outline" />
        </p>
      </div>
    </q-page-container>
  </q-layout>
</template>

<q-layout view="lHh Lpr lFf">

<q-page-container>

<div>

<p>

<span>マテリアルアイコン:</span>

<q-icon name="thumb_up" />

</p>

<p>

<span>FontAwesame:</span>

<q-icon name="fas fa-ambulance" />

</p>

<p>

<q-icon name="mdi-alert-circle-outline" />

</p>

</div>

</q-page-container>

</q-layout>

</template>

なぜだ！！！

原因

これは、Vue-CLIのプラグインとして、Quasarを導入する際の対話時にSelect featuresの項目で使用するアイコンを指定せずに生成すると、Choose Quasar Icon Setに指定したものしか読み込まれなくなってしまいます。

📦  Installing vue-cli-plugin-quasar...

yarn add v1.17.3
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved 1 new dependency.
info Direct dependencies
└─ vue-cli-plugin-quasar@1.0.0
info All dependencies
└─ vue-cli-plugin-quasar@1.0.0
✨  Done in 6.21s.
✔  Successfully installed plugin: vue-cli-plugin-quasar

? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes
? Treeshake Quasar? (you'll need to import the components, directives and plugins that you use yourself) Yes
? Use RTL support? No
? Choose Quasar Icon Set Material
? Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/quasar/lang en-us
? Select features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ IE11 support
 ◯ Roboto font
 ◯ Material icons
 ◯ Fontawesome icons
 ◯ Ionicons icons
 ◯ MDI icons
 ◯ Eva icons

📦 Installing vue-cli-plugin-quasar...

yarn add v1.17.3

[1/4] 🔍 Resolving packages...

[2/4] 🚚 Fetching packages...

[3/4] 🔗 Linking dependencies...

[4/4] 🔨 Building fresh packages...

success Saved 1 new dependency.

info Direct dependencies

└─ vue-cli-plugin-quasar@1.0.0

info All dependencies

└─ vue-cli-plugin-quasar@1.0.0

✨ Done in 6.21s.

✔ Successfully installed plugin: vue-cli-plugin-quasar

? Allow Quasar to replace App.vue, About.vue, Home.vue and (if available) router.js? Yes

? Treeshake Quasar? (you'll need to import the components, directives and plugins that you use yourself) Yes

? Use RTL support? No

? Choose Quasar Icon Set Material

? Quasar language pack - one from https://github.com/quasarframework/quasar/tree/dev/quasar/lang en-us

? Select features: (Press <space> to select, <a> to toggle all, <i> to invert selection)

❯◉ IE11 support

◯ Roboto font

◯ Material icons

◯ Fontawesome icons

◯ Ionicons icons

◯ MDI icons

◯ Eva icons

この際に全てにチェックを入れていれば、問題なく使用出来るのですが、後から追加するには、「quasar.conf.jsを作って記述をする必要があるよ！」と公式ドキュメントに書いてありましたが、別の方法でも簡単に実現出来たので今回はそちらをご紹介しようと思います。

手順

前提

今回はVue-CLI3系によってプロジェクトにQuasarを導入していることを前提とします。

以下の記事にて導入方法をご紹介しているので参考にしていただければなと思います。

参考

【Vue.jsのUIフレームワーク】Electronアプリのデザインフレームワークに「Quasar」をインストール・導入する方法

quasar.tsの修正

やり方はとても簡単で、src/quasar.tsに使いたいアイコンのcssファイルのimport文を追加するだけです。

各アイコンのモジュール自体はデフォルトでインストールされているようなので、yarnやnpmでインストールする必要は無さそうです。

./node_modules/@quasar/
└── extras
    ├── LICENSE
    ├── README.md
    ├── animate
    ├── eva-icons
    ├── fontawesome-v5
    ├── ionicons-v4
    ├── material-icons
    ├── material-icons-outlined
    ├── material-icons-round
    ├── material-icons-sharp
    ├── mdi-v3
    ├── mdi-v4
    ├── package.json
    ├── roboto-font
    ├── roboto-font-latin-ext
    └── themify

14 directories, 3 files

./node_modules/@quasar/

└── extras

├── LICENSE

├── README.md

├── animate

├── eva-icons

├── fontawesome-v5

├── ionicons-v4

├── material-icons

├── material-icons-outlined

├── material-icons-round

├── material-icons-sharp

├── mdi-v3

├── mdi-v4

├── package.json

├── roboto-font

├── roboto-font-latin-ext

└── themify

14 directories, 3 files

今回は、FontAwesameとマテリアルデザインアイコンを追加してみようと思います。

import Vue from "vue";

import "./styles/quasar.styl";
import "quasar/dist/quasar.ie.polyfills";
import lang from "quasar/lang/ja.js";
import "@quasar/extras/roboto-font/roboto-font.css";
import "@quasar/extras/material-icons/material-icons.css";
import "@quasar/extras/fontawesome-v5/fontawesome-v5.css";  // 追加
import "@quasar/extras/mdi-v4/mdi-v4.css";// 追加

...
(略)
...