如何修复材料表（React）中的分页图标（将其重置为默认值）？

Question

I'm working on front-end to display a table and using material-table in React. Everything's well and good but I've been seeing weird pagination icons (instead of normal arrows) and I'm not sure why:

Weird pagination icons

How can I fix it?

Below is the Material Table tag and attributes that've been added:

<MaterialTable
        title="Title"
        columns={this.state.columns}
        data={newDataTable}
        options={{
          selection: true
        }}
        options={{
          search: false,
          sorting: true
        }}
        actions={[
          {
            icon: () => <Checkbox />,
            tooltip: 'checkbox'
          },
          {
            icon: () => <InfoIcon />,
            tooltip: 'info',
            onClick: (event, item) => {
              this.setState({
                isOpen: true,
                selectedItem: item
              });
            }
          }
        ]}
      />
    </div>

Answer 1

Here problem is with your icon is not getting css because we need to provide link in index.js

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

You can check how to use material icons material-ui

Answer 2

After install MaterialTable component. You need to do :

Step 1 : Import icons in your index.html

<link
      rel="stylesheet"
      href="https://fonts.googleapis.com/icon?family=Material+Icons"
    />

or install @material-ui/icons (import as component).

Step 2 : Use your MaterialTable component as per your requirement

import React from "react";
import "./styles.css";
import MaterialTable from "material-table";

    export default function App() {
      return (
        <MaterialTable
          title="Simple Action Preview"
          columns={[
            { title: "Name", field: "name" },
            { title: "Surname", field: "surname" },
            { title: "Birth Year", field: "birthYear", type: "numeric" },
            {
              title: "Birth Place",
              field: "birthCity",
              lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
            }
          ]}
          data={[
            { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
            {
              name: "Zerya Betül",
              surname: "Baran",
              birthYear: 2017,
              birthCity: 34
            }
          ]}
          actions={[
            {
              icon: "save",
              tooltip: "Save User",
              onClick: (event, rowData) => alert("You saved " + rowData.name)
            }
          ]}
        />
      );
    }

Here is working code : https://codesandbox.io/s/sharp-robinson-7f6n7

Live demo : https://7f6n7.csb.app/