Question

我正在建立一个预制应用程序。在哪里，我使用material-components-web。如果我渲染这样的图标

<i class="material-icons" aria-hidden="true">home</i>

工作正常并显示主页图标。

但有一些原因我想把home作为变量，如下所示：

let homeIcon = 'home';
<i class="material-icons" aria-hidden="true">{homeIcon}</i>

有没有办法做到这一点？

谢谢，

Answer 1

您可以使用以下任何变体的材质图标： face 和 

我认为您的变量不会转移到连字，而是显示home。尝试执行const iconHome = home;之类的操作或使用数字字符引用。

此示例使用称为连字的排版功能，该功能允许仅使用其文本名称呈现图标字形。替换由Web浏览器自动完成，并提供比等效数字字符引用更可读的代码。此外，您还需要检查特殊的薄包装材料组件，以便进行预处理：preact-material

Answer 2

您还可以尝试使用模板文字

{`${homeIcon}`}