使用 MUI 图标与 class="material-symbols-outlined" 进行反应

Question

我正在尝试使用以下语法在我的代码中包含 MUI 图标，如此处所述：

<span className="material-symbols-outlined">
menu
</span>

但是，它显示为纯文本菜单而不是菜单图标。我也按照这里提到的那样尝试过：

import Icon from '@mui/material/Icon';
...
<Icon>terminal</Icon>

但这也将其显示为纯文本。

这有效：

import MenuIcon from '@material-ui/icons/Menu';
...
<MenuIcon />

但是我想动态加载图标，所以这种方式不适合我。

我的图标位于 JSON 文件中，不同的项目有不同的图标。根据加载的项目，图标会发生变化。

关于如何实现这项工作有什么想法吗？

Answer 1

我建议你使用Iconify

这个库有所有可能的图标，并且与MUI有很好的集成，并且能够动态导入图标，例如：