I’m working on an Electron application built with React and Webpack 4. I want to add Material Design Icons to my project but I’m running into some issues.
I installed the package using npm install material-design-icons but I’m not sure how to properly include the CSS styles. I tried importing the stylesheet directly in my main component file like this:
// In my main App.tsx file
@import "~material-design-icons/iconfont/material-icons.css";
But Webpack throws an error saying it can’t locate the CSS file. I’ve seen some examples where people configure this in Angular projects by adding the path to their config files, but since I’m using React I don’t have that same setup.
What’s the correct way to get these icons working? Should I be importing them differently in my TypeScript files? Or do I need to modify my Webpack configuration to handle the CSS properly?
Had the same problem with Material Design Icons in my Electron React app. The import fix mentioned above works, but I found a better approach. Skip importing the whole CSS file. Use individual SVG icons from @material-design-icons packages instead. You get better tree shaking and smaller bundles. Install specific categories like npm install @material-design-icons/svg and import only what you need. If you prefer the iconfont route, check your webpack.config.js has file-loader set up for font files (woff, woff2, ttf). The Material Icons CSS needs those font files processed correctly. I had to add specific rules for these file types in my Webpack config to make it work in Electron.
Been there too many times. Your CSS import syntax is wrong, but that’s not the real problem.
Webpack doesn’t have the right loaders for CSS and font files that Material Icons needs. You need css-loader, style-loader, and file-loader all set up correctly.
Honestly though, managing icon dependencies and build configs manually sucks. Every update breaks something.
I just automate everything now. My workflows handle icon management, CSS processing, and build optimization automatically. When Material Icons updates, the workflow grabs them, processes the assets, and updates my projects. No more touching Webpack configs.
The automation compiles CSS, processes font files, and can optimize which icons actually get bundled based on what you’re using. Way better than debugging loaders every few months.
You can chain it with deployment too, so your Electron app gets icon updates pushed automatically.
Check out Latenode for workflow automation: https://latenode.com
Try react-icons instead of the official Material Design Icons package. You get Material Icons plus a bunch of other icon libraries all in one. Just import like import { MdHome } from 'react-icons/md' and they render as React components. No CSS imports, works great with TypeScript.
I made this switch after fighting similar Webpack issues in my Electron projects. Bundle size stays small since you only pull in what you import. Better IntelliSense and type checking too compared to CSS class icons. Just npm install react-icons and you’re done - no extra Webpack config needed.
The Webpack error’s happening because you’re mixing CSS syntax in a TypeScript file. Import it as a module instead.
Change this:
@import "~material-design-icons/iconfont/material-icons.css";
To this:
import 'material-design-icons/iconfont/material-icons.css';
Just make sure your Webpack config has css-loader and style-loader set up for CSS imports. Most React setups already handle this.
Honestly though, I’d skip the Webpack wrestling entirely. I automate this stuff now.
I use Latenode for automated pipelines that handle icon management, CSS compilation, and deployment. You can create workflows that automatically pull icon updates, process stylesheets, and sync everything with your build.
Saves me hours of debugging Webpack configs. I focus on actual development instead of toolchain headaches. The visual workflow builder makes chaining these tasks together super easy.
Check it out: https://latenode.com
webpack4 gets weird with css imports. Just add the css import straight to your index.html instead - throw it in the head like <link href="node_modules/material-design-icons/iconfont/material-icons.css" rel="stylesheet">. Fixed it for me when webpack wouldn’t stop whining about css modules. Electron handles it fine and you skip the loader headache.