Translation of this issue:

Element UI version

2.15.5

OS/Browsers version

MasOs Big Sur / Microsoft Edge Version 93.0.961.52

Vue version

2.6.14

Reproduction Link

https://codesandbox.io/s/nuxt-element-dark-mode-w8vjj?file=/components/Tutorial.vue

Steps to reproduce

1. Create two pattern variable files under assets / stylesheets / element UI /: vars-dark.scss and vars-light.scss;
2. In index.scss of the statistics directory, different variable files are introduced according to the class selector:

$--font-path: '~element-ui/lib/theme-chalk/fonts';
:root:not(.dark-mode) {

@import \"vars-light\";
@import \"~element-ui/packages/theme-chalk/src/index\";

}
.dark-mode {

@import \"vars-dark\";
@import \"~element-ui/packages/theme-chalk/src/index\";

}

1. Reference in plugins / element-ui.js:

import Vue from \"vue\";
import Element from \"element-ui\";

import locale from \"element-ui/lib/locale/lang/en\";
import \"@/assets/stylesheets/element-ui/index.scss\";

Vue.use(Element, { locale });

1. Click switch on the page to switch the mode.

What is Expected?

In both modes, the color changes, but the icon also needs to be displayed normally

What is actually happening?

At this time, the color is switched, but the icon is not displayed (the fonts are not introduced and loaded)