Comments (9)
Thanks for reporting. It works for me with webpack 5.37.1 and css-loader 6.0.0 when importing via js as import 'material-icons';
.
Please try using import 'material-icons/iconfont/material-icons.css';
instead of import 'material-icons';
and let me know if that works.
Please check if you have configured webpack correctly to load css and font files. Example webpack.config.js
:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
};
Please provide the following details to help me reproduce the error:
- full error message
- your webpack config
webpack.config.js
- exact versions of each package you are using:
material-icons
css-loader
webpack
node
npm
from material-icons.
Thank you for looking into it! I'm using Node 16.13.0 LTS , npm 8.1.1, webpack 5.60.0, material-icons 1.10.0, css-loader 6.5.0
I'm also running under electron 15.
my webpack config is the following:
const path = require("path");
const webpack = require("webpack");
const HtmlWebPackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
const WebpackPwaManifest = require("webpack-pwa-manifest");
const devServer = require("./devServer.js");
const middleware = require("./middleware.js");
const Package = require("./package.json");
const NAME = "GCP Data Manager";
const LOGO = "./src/images/logo.png";
const isProd = process.argv[process.argv.indexOf("--mode") + 1] === "production";
console.info(`Mode: ${((isProd) ? "Production" : "Development")}`);
module.exports = {
entry: ["./src/index.jsx"],
context: __dirname,
output: {
filename: "index.js",
chunkFilename: "[name].js",
publicPath: "",
globalObject: "this",
},
resolve: {
fallback: { "path": require.resolve("path-browserify") }
},
target: "electron-renderer",
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 8080,
before: middleware,
after: devServer
},
module: {
rules: [
{
test: /\.js|\.jsx$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
},
{
test: /\.(png|svg|jpg|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: "images/[name].[ext]",
}
}
]
},
{
test: /\.(eot|svg|ttf|otf|woff|woff2)$/,
use: [
{
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
}
}
]
},
{
test: /\.(css|scss)$/,
use: [{
loader: "style-loader"
},
{
loader: "css-loader", options: {
sourceMap: true
}
},
{
loader: "sass-loader", options: {
sourceMap: true
}
}]
}
]
},
stats: "errors-only",
devtool: isProd ? false : "source-map",
plugins: [
new CleanWebpackPlugin(),
new webpack.DefinePlugin({
VERSION: JSON.stringify(Package.version),
APP_NAME: JSON.stringify(NAME),
APP_TITLE: JSON.stringify(NAME),
DESCRIPTION: JSON.stringify(NAME),
AUTHOR: JSON.stringify("Semantic Clarity"),
WEBSITE: JSON.stringify("https://www.semanticclarity.com"),
"process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
"process.env.DEBUG": JSON.stringify(process.env.DEBUG),
IS_PROD: isProd
}),
new HtmlWebPackPlugin({
template: "./src/index.html",
filename: "index.html",
title: NAME
}),
new FaviconsWebpackPlugin({
logo: LOGO,
prefix: "images/",
inject: true,
cache: true,
favicons: {
icons: {
// Platform Options:
// - offset - offset in percentage
// - background:
// * false - use default
// * true - force use default, e.g. set background for Android icons
// * color - set background for the specified icons
// * mask - apply mask in order to create circle icon (applied by default for firefox). `boolean`
// * overlayGlow - apply glow effect after mask has been applied (applied by default for firefox). `boolean`
// * overlayShadow - apply drop shadow after mask has been applied .`boolean`
//
android: false, // Create Android homescreen icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleIcon: false, // Create Apple touch icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
appleStartup: false, // Create Apple startup images. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
coast: false, // Create Opera Coast icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
favicons: true, // Create regular favicons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
firefox: false, // Create Firefox OS icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
windows: false, // Create Windows 8 tile icons. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
yandex: false // Create Yandex browser icon. `boolean` or `{ offset, background, mask, overlayGlow, overlayShadow }`
}
}
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
}),
new WebpackPwaManifest({
name: NAME,
short_name: NAME,
description: NAME,
background_color: "#403014",
crossorigin: "use-credentials", //can be null, use-credentials or anonymous
icons: [
{
src: path.resolve(LOGO),
sizes: [96, 128, 192, 256, 384, 512], // multiple sizes
ios: true
}
]
})
],
// optimization
optimization: isProd ? {
providedExports: true,
usedExports: true
} : {}
};
Icons fail to build correctly (no error from webpack) and the error message I get on runtime (browser) is:
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/fd689a9b06c632755223.woff2
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/dccb34ec9957161fe047.woff
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919
node:electron/js2c/renderer_init:97 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
Policy set or a policy with "unsafe-eval" enabled. This exposes users of
this app to unnecessary security risks.
For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.
(anonymous) @ node:electron/js2c/renderer_init:97
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/777b5ef3e567e6a1bb05.woff2
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/4e1f61ad3ac34c98b41e.woff
index.html:1 OTS parsing error: invalid sfntVersion: 1702391919
from material-icons.
Tried the import of the CSS. It doesn't work, same situation.
from material-icons.
BTW, that import method worked well with css-loader@5
from material-icons.
Thanks for the info. Looking at your webpack config and error message:
{
test: /\.(eot|svg|ttf|otf|woff|woff2)$/,
use: [
{
loader: "file-loader",
options: {
name: "fonts/[name].[ext]",
}
}
]
},
index.html:1 Failed to decode downloaded font: file:///Users/doctor/Documents/workspace/gcp-data-manager/dist/fd689a9b06c632755223.woff2
It looks like the relative path to fonts isn't correctly configured. webpack file-loader might be putting fonts in a sub folder dist/fonts
but the code in index.html is trying to access directly from dist
directory.
See webpack-contrib/css-loader#1354 (comment). Others are also facing similar issue when using css-loader@6 with file-loader. So migrating to asset modules might help.
BTW, that import method worked well with css-loader@5
So aren't you getting "OTS parsing error" when using css-loader@5 and icons are rendered correctly?
from material-icons.
Correct It works fine with 5. I’ll check the link. Appreciate the time on this. If I can help let me know, I use this awesome library for my open source framework as a nice dependency and also for my apps. Great work on this, kudos!
from material-icons.
Thanks. Were you able to resolve it by migrating from file-loader to asset modules? I was able to reproduce the error with css-loader@6 + file-loader and changing file-loader to asset modules fixed it. So this issue is specific to css-loader@6 + file-loader and not related to the material-icons package.
from material-icons.
I'll look into that, thank you for testing this out.
from material-icons.
It works, thank you again!
from material-icons.
Related Issues (20)
- Missing icon: shortcut HOT 2
- CSS usage doesn't work HOT 2
- Support for Material Symbols HOT 2
- Publish codepoints/versions.json? HOT 4
- A lot of icons are not displayable HOT 3
- The new icons from version 1.11.6 are not available when using HOT 2
- Customize css class HOT 4
- Automatically generated typescript types HOT 8
- Outlined icon for label_important is incorrect HOT 1
- Fast copy icons element? HOT 2
- Many icons not presented in minified CSS file in release HOT 3
- Autosize HOT 1
- Monitoring icon is missing HOT 2
- How to use Material Icon in react native with expo? HOT 1
- Outdated font files HOT 1
- Need to get codepoint for a specific ligature HOT 1
- Can I add Calculator? HOT 1
- Can I use it in Dart? HOT 1
- Update with all symbol items HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from material-icons.