如何在React中渲染Material UI图标？

Question

我是React的新手，想要在现有组件中渲染材质UI图标（来自https://www.npmjs.com/package/@material-ui/icons）。

我注意到之前在该组件上工作的人员已经包含了具有属性的图标，例如：

<FieldWrapper scrollToOnFocus icon={<SomeMaterialIcon />}>

但我需要在现有的html中添加我的图标，例如：

<a href="/somewhere">Read more ICON HERE</a>

我不确定如何做到这一点。将{<SomeMaterialIcon />}或<SomeMaterialIcon />直接添加到HTML行会破坏组件。

有人知道怎么做吗？

Answer 1

假设您已经安装了软件包（@ material-ui / icons）并正确导入了Icon，它应该像<SomeMaterialIcon />一样简单。

示例：

import React from "react";
import ReactDOM from "react-dom";

import AddIcon from '@material-ui/icons/Add';

function App() {
  return (
    <div>
      <a href="/somewhere"><AddIcon /></a>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);