<Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} breakpoint="md">
<Menu
theme="dark"
mode="inline"
defaultSelectedKeys={['10']}
style={{ lineHeight: '64px' }}
>
<Menu.Item key="2" icon={<LoginOutlined />}><Link to="/login">Login</Link></Menu.Item>
This is what my Sider code looks like. But still, the icon doesn't show on the Sider. This code works perfectly on CodeSandBox. Using the latest version of Chrome.
Even the collapsed form doesn't show icons.
Please help.
Edits: 1. CodeSandbox Link: https://codesandbox.io/s/sider-ant-design-demo-zkpcs?fontsize=14&hidenavigation=1&theme=dark 2. package.json:
{
"name": "gui",
"version": "0.1.0",
"private": true,
"homepage": "https://exampple.com/",
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.5.0",
"@testing-library/user-event": "^7.2.1",
"antd": "^4.1.4",
"axios": "^0.19.2",
"babel-plugin-import": "^1.13.0",
"customize-cra": "^0.9.1",
"dayjs": "^1.8.23",
"dotenv": "^8.2.0",
"eslint": "^6.8.0",
"eslint-plugin-flowtype": "^4.6.0",
"gh-pages": "^2.2.0",
"less": "^3.11.1",
"less-loader": "^5.0.0",
"react": "^16.13.1",
"react-app-rewired": "^2.1.6",
"react-dom": "^16.13.1",
"react-ga": "^2.7.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.0",
"redux": "^4.0.5",
"redux-thunk": "^2.3.0",
"tsutil": "^6.1.1",
"typescript": "^3.8.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "netlify deploy",
"deployprod": "netlify deploy --prod",
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject",
"postinstall": "npm run build"
},
"engines": {
"node": "13.7.0",
"npm": "6.13.6"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}