Use Material Design Icons in NPM Electron React project

1
votes

I am trying to figure out how to use the Material Design Icons in an NPM Electron project. The project is setup with Webpack 4. According to the Google Github page it is simply installed by npm install material-design-icons. According to this Angular issue the path to the Material CSS file has to be added to the configuration. In my project I use React though and do not have any configuration file like this. So I thought importing the CSS from within the entry TypeScript file App.tsx like this @import "~material-design-icons/iconfont/material-icons.css";, but when starting the project, Webpack does not find the file CSS file.

What must be done to use the Material Design Icons? Do I have to import them in the TypeScript/JavaScript files? Or do I have to setup Webpack for it?

1
reactjstypescriptwebpacksassmaterial-design
It might be easier to use the community version of material design icons. You just import the icons from @mdi/js and there is a react component for rendering them. – James Coyle

1 Answers

1
votes

I solved it meanwhile by importing the following into the dependencies section within the package.json:

"@material-ui/icons": "4.0.0",

Within a TypeScript React Component I for instance import the following:

import Add from '@material-ui/icons/Add';
import Edit from '@material-ui/icons/Edit';

which I can then use as return value from within the render() method:

<Add />
<Edit />