如何更改默认的“材料表”图标答案

【问题标题】：How to change the default 'material table' icons如何更改默认的“材料表”图标
【发布时间】：2020-06-12 07:29:20
【问题描述】：

如何更改材质表的默认图标？我不想像 material-table 包中描述的那样使用 material-icons 包。有什么想法吗？

我想使用“zmdi”字体而不是默认图标。这就是我所做的，只是想知道我在做什么是对的吗？

提前致谢。

const tableIcons: Icons = {
Search: forwardRef((props, ref) => <span className="zmdi zmdi-search"/>),
Clear: forwardRef((props, ref) => <span className="zmdi zmdi-search"/>)

};

<MaterialTable
    icons={tableIcons}
/>

【问题讨论】：

标签： reactjs material-ui material-table

【解决方案1】：

const tableIcons: Icons = {
Search: forwardRef((props, ref) => <span className="zmdi zmdi-search" />),
Clear: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-close" />
  </div>
)),
SortArrow: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-long-arrow-up" />
  </div>
)),
FirstPage: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-caret-left" />
  </div>
)),
NextPage: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-chevron-right" />
  </div>
)),
PreviousPage: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-chevron-left" />
  </div>
)),
LastPage: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-caret-right" />
  </div>
)),
ResetSearch: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-close" />
  </div>
)),
ThirdStateCheck: forwardRef((props, ref) => (
  <div {...props} ref={ref}>
    <span className="zmdi zmdi-close" />
  </div>
))

};

好吧，我设法做到了这一点。

【讨论】：