Vite + Vue3 in Electron: how to import and use Material Design Icons @mdi/font (or any other icon font)

Question

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.

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

Answer 1

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 :)