How can i add material icon to react app?

Question

I have a problem adding the monitor_heart icon from material-design-icons/font to a react project. The icon is located here: (https://marella.me/material-icons/demo/) you have to type "monitor_heart"

So far I added icons from material-ui without any problem unfortunately here I have a problem.

1. I have installed the package: npm and @material-design-icons/svg

2. I imported the icon: import monitor_heart from "@material-design-icons/svg/filled/monitor_heart.svg"

3. i add it to App:

   div <monitor_heart /> /div //or {monitor_heart}

but it not work -I don't know how can I get to this specific icon and just execute it / show it on the screen. What I did it wrong? Can anyone help me?

code located here: https://github.com/beginnerinreact/material-icon-problem

Answer 1

Ok now it works! I had to add correct form of import: import { ReactComponent as Monitor_heart } from "@material-design-icons/svg/outlined/monitor_heart.svg" where I have to stress that this is a React component