ReactJS - '@material-ui/icons/Fastfood' 不工作

Question

ReactJS - '@material-ui/icons/Fastfood' 不工作。

Header.js

import React, { Component } from 'react';
import './Header.css';
import Fastfood from '@material-ui/icons/Fastfood';

class Header extends Component {

render() {  
    return(
        <div>
            <header className="app-header">
                <div className="app-logo">
                    <i class="material-icons">Fastfood</i>
                </div>
            </header>
        </div>
    )
}
export default Header;

Header.css

.app-header {
background-color: #263238;
padding: 16px 16px 16px 16px;
display: flex;
align-items: center;
justify-content: space-between;
}

.app-logo{
color: #fff;
font-size: 18px;
text-decoration: none;
}

package.json

{
  "dependencies": {
    "@material-ui/core": "^4.1.2",
    "@material-ui/icons": "^4.2.1",
"@material-ui/styles": "^4.1.2",
"moment": "^2.24.0",
"react": "^16.8.0",
"react-dom": "^16.8.0",
"react-scripts": "^3.0.1"
  },
}

快餐 SVG 图标未显示在页面上。标题仅显示文本“快餐”代替徽标。

Answer 1

我修改了如下所示的渲染函数来解决这个问题。

render() {  
    return(
        <div>
            <header className="app-header">
                    <Fastfood className='app-logo'/>
            </header>
        </div>
    )
}