1

I want to bundle @mdi/font icons into my application (it's an Electron app).

I installed npm i @mdi/font --save-dev:

  "devDependencies": {
    "@mdi/font": "^7.0.96",
  }

Then I imported css/scss, I tried several different ways:

  • import in main.ts: import '@mdi/font/css/materialdesignicons.css';
  • import as scss in main.scss: @import './node_modules/@mdi/font/scss/materialdesignicons.scss';
  • import as css in base.css: @import './node_modules/@mdi/font/css/materialdesignicons.css';

Then I used mdi-* css classes in my markup:

SideMenu.vue:

<template>
  <aside class="menu">
    <ul class="action-bar">
      <li class="action-item active">
        <a class="action-label icon">
          <i class="mdi-cog"></i>
        </a>
      </li>
      <li class="action-item">
        <a class="action-label icon">
          <i class="mdi-home"></i>
        </a>
      </li>
      <li class="action-item">
        <a class="action-label icon">
          <i class="mdi-content-copy"></i>
        </a>
      </li>
    </ul>
  </aside>
</template>

The app starts and working but I see the same icon.

enter image description here

Things to consider:

  • I don't want to use component-per-icon approach (don;t see the point), that's because I don't use 'vue-material-design-icons' and the like
  • I don't want to use external links to CDN
Shrike
  • 9,218
  • 7
  • 68
  • 105

1 Answers1

3

Answering my own question. Thanks to @Duannx, the solution is very simple - just to add the missing mdi class:

<a class="action-label icon">
  <i class="mdi mdi-cog"></i>
</a>

there's nothing specific to vite/vue/electron :)

kissu
  • 40,416
  • 14
  • 65
  • 133
Shrike
  • 9,218
  • 7
  • 68
  • 105