0

The package : material-ui/core has been depracted .What should I do inorder to add the icons in my App.jsx . https://www.npmjs.com/package/@material-ui/core I am running it on the code sand box where we directly to serach for the name and the drop it directyky into the dependencies folder.

To add icons in react APP.jsx

GUNGUN PANCHAL
  • 1
  • 1
  • What are you asking? Did you read the deprecation message? It links to how to upgrade to the `@mui/material` package instead. – Andy Ray Jun 02 '23 at 05:40
  • You can use another icons library instead. – krishnA tiwari Jun 02 '23 at 09:02
  • Material UI v4 doesn't receive active development since September 2021. See the guide https://mui.com/material-ui/migration/migration-v4/ to upgrade to v5. Use this documentation link and upgrade to v5. – krishnA tiwari Jun 02 '23 at 09:06

2 Answers2

2

You can use react-icons.

https://react-icons.github.io/react-icons/

npm install react-icons --save

Official sample:

import { FaBeer } from 'react-icons/fa';
class Question extends React.Component {
  render() {
    return <h3> Lets go for a <FaBeer />? </h3>
  }
}
//functional
function Question() {
return <FaBeer />
}

Adjust size:

<FaBeer size={20} />

ps. You can install mui by

npm install @mui/material @emotion/react @emotion/styled
Tom Fan
  • 312
  • 1
  • 9
1

There are many options for icons for your React app. Some of the popular icon libraries are:

  1. Font Awesome:
    Font Awesome is a popular icon library, with over 2,000 free and open-source icons. It also offers a pro subscription starting at $79 a year, which gives you access to almost 20,000 icons. These icons can be customized with different sizes and colors.

  2. React Feather:
    React Feather is a collection of minimalist open source icons for React, based on the Feather Icons library. This icon set emphasizes simplicity, consistency and readability.

  3. Material UI:
    It gives you access to the Material Icons library, which was created by Google in line with the Material Design system.

  4. React Icons:
    It provides a large variety of icons.

  5. Heroicons:
    Heroicons was created by the same makers of Tailwind, a popular CSS framework. This library offers a small – but beautiful – collection of SVG icons.

And many more options.

krishnA tiwari
  • 139
  • 8