How to add Material Icon to React App with Material-UI?

If you are looking to learn Material-UI, the course is available at http://bit.ly/2SZDYyw

In today's video we will look at how you can add Material Icons inside your React app using Material UI library. These Free Material icons from google have been designed so that you can give a visual cue for common actions to your end-users. To demonstrate how this freely available Material Icons library can be leveraged, we will head over to Code Sandbox.

Material-UI SvgIcon Component is available here

Google Material Icons are available here

Full Transcript

Hey this is Deeksha from Bonsaiilabs and today we will look at how you can add Material Icons inside your React app using Material UI library. These Free Material icons from google have been designed so that you can give a visual cue for common actions to your end users. To demonstrate how this freely available Material Icons library can be leveraged, we will head over to Code Sandbox.

Let’s choose the official React Sandbox which has everything set up for experimentation purposes. Then add a dependency for Material UI icons. Select the latest one. This package gives you access to the Google Material Icons as React components that you can directly use within your app. Now these React components underneath use a Material-UI component called <SvgIcon> that renders the SVG path of every icon. So you need to also add a peer dependency of Material-UI to be able to use those icon components. If you are already using Material-UI in your project, you only need this Material-UI icons library. We bootstrapped this project from scratch so, I will both of them. Let’s replace this template heading to "Material Icons Demo" and this h2 heading with our text "Let’s start adding beautiful Material Icons". Now suppose you want to use this Home icon. We will go back to the project and add an import for HomeIcon from @material-ui/icons . Now as soon as you type /, it gives you the options of icons available. Let’s say we want to use HomeTwoTone icon. We can now simply add this <HomeIcon> component just like you would use any other React component in the project. And you can see, we have the icon rendered.

As far as styling and other customisations fo this Material Icon component is concerned, You can always refer to the API of this <SvgIcon> Component in Material-UI. I told you in the beginning that all these icon components are built using <SvgIcon> component, this is what I was referring to. These are the props available to you on all of these Material Icons. Let’s say we want to change the color of the icon, these are the possible color types you can assign. If you are using your own material theme with Material-UI, then this primary will refer to the primary color of your theme. Same is true with secondary, it refers to the secondary color of your theme. Let’s go back to the codebase and change the color. We add the prop color=“primary”, it turns to this purple color. Well!! if you are thinking where is this color coming from, Material-UI library has a default theme configured already and this is the primary color in their theme. If you change to “secondary”, its color is changed. Now let’s say you don’t want the default primary or secondary color from their theme and instead want to use your own color without having to worry about creating your own theme. Which btw is not recommended. I would not tell you to use random colours in your icons. But if you really have a valid use case to do so? Then you can achieve that by adding the inline styles by using the style prop and then add the color you want. Let’s say we want green color and you can see it turns the icon to green. Another thing that might help you is a way to search and map these icons. It will be a time saver for you during development. So coming back to the Material Icons, let’s say we want to add a Delete icon and it should be this Delete forever icon whose name is delete_forever. So how do you go and find this in the Material-UI icons library in the codebase? Well!! in the code, we will do import DeleteIcon from “@material-ui/icons/";, look for DeleteForever component which is right here. The names you see on the Google Material Icons page will be available in camel case in this icons library. And we have the DeleteForever icon available here. That’s all I wanted to cover in this video. I hope it was useful for you. Thanks for watching and I will see you in the next video.