Vue Quasar项目中无法使用Material Symbols Outlined图标求助

Material Symbols Outlined图标在Quasar中的使用规则和普通Material Icons存在差异，按以下步骤修正即可：

1. 确认配置无误
   你的quasar.config.js中extras的配置是正确的，保留当前设置即可：

   extras: [
     'material-icons',
     'material-symbols-outlined',
   ],
   

2. 使用正确的图标命名规则
   Quasar要求Material Symbols Outlined的图标名使用驼峰格式，而非下划线分隔。将settings_b_roll改为settingsBRoll，同时指定图标集为material-symbols-outlined：

   <q-btn
     label="正确显示图标"
     icon="settingsBRoll"
     icon-set="material-symbols-outlined"
     type="button"
     color="primary"
   ></q-btn>
   

3. 全局默认图标集（可选优化）
   如果项目中主要使用Material Symbols Outlined，可以在quasar.config.js的framework里设置默认图标集，这样不用每次都添加icon-set属性：

   framework: {
     iconSet: 'material-symbols-outlined',
     // 其他框架配置...
   }
   

   之后直接使用驼峰格式的图标名即可：

   <q-btn
     label="全局默认图标"
     icon="settingsBRoll"
     type="button"
     color="primary"
   ></q-btn>
   

注意事项 #

• 确保使用Quasar最新稳定版，旧版本可能存在图标集兼容问题
• 若仍不显示，检查浏览器控制台是否有资源加载报错，排除网络或依赖安装问题

内容的提问来源于stack exchange，提问作者igorludi