Google Material Symbols 不适用于 vue.js 应用程序的延迟加载组件

Question

如何在 Vue.js 的延迟加载/动态导入组件上使用材质符号，我当前的设置不起作用，图标仅在静态加载视图中呈现：

main.js

import { createApp } from 'vue/dist/vue.esm-bundler';
import App from './App.vue';
import router from './router';
import 'material-symbols/rounded.scss'; // importing material stylings
import store from './store';


const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

路由器/index.js

...
    routes: [
...
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/AboutView.vue'),
    }
...
]
...

Answer 1

经过一番尝试和错误，我发现这是解决该问题的最佳方法。

在全局样式（或每个 vue 组件的样式）中，包含以下内容：

    .material-symbols-rounded { // this is for the rounded style, you can change it to what you prefere
        font-variation-settings:
            'FILL' 1,
            'wght' 600,
            'GRAD' 0,
            'opsz' 48;
        font-family: 'Material Symbols rounded';
        font-weight: 600;
        font-style: normal;
        font-size: 24px;
        /* Preferred icon size */
        display: inline-block;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        white-space: nowrap;
        direction: ltr;
    }

当然，这些是我的偏好，您可以从 Material Symbols Docs 中找到可以执行的操作，其想法是在代码中包含图标样式，就像您自行托管材质一样。