Material Icons and Material Icons Outlined load multiple times


Hi,
The material icons fonts used for Icon component seems to load repeatedly, they are hashed, the remaining one is the custom-icons font.
The below is Webpack configuration:

const path = require("path");

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");

module.exports = {
	context: path.join(__dirname),
	entry: [
		// Includes widgets styles in the build
		"@com.mgmtp.a12.widgets/widgets-core/lib/theme/basic.css",
		// Guarantees that config is evaluated first
		path.join(__dirname, "src/config/index.ts"),
		path.join(__dirname, "src/index.tsx")
	],
	module: {
		rules: [
			{
				test: /\.tsx?$/,
				use: [
					{
						loader: "ts-loader",
						options: {
							transpileOnly: true,
							onlyCompileBundledFiles: true
						}
					}
				],
				exclude: /[\\/](node_modules|test)[\\/]/
			},
			{
				test: /\.js$/,
				enforce: "pre",
				use: ["source-map-loader"]
			},
			{
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, "css-loader"]
			},
			{
				test: /\.(png|jpe?g|gif|svg|woff|woff2|eot|ttf|otf)$/i,
				// More information here https://webpack.js.org/guides/asset-modules/
				type: "asset",
				generator: {
					filename: "static/media/[hash:8][ext][query]"
				}
			},
			{
				test: /\.(pdf)$/i,
				type: "asset",
				generator: {
					// File name should be kept for download
					filename: "static/media/[name][ext][query]"
				}
			}
		]
	},
	output: {
		path: path.join(__dirname, "build/webpack"),
		filename: "[name].bundle.[contenthash:8].js",
		chunkFilename: "[name].chunk.[chunkhash:8].js",
		publicPath: "/"
	},
	plugins: [
		// Typescript type checking
		new ForkTsCheckerWebpackPlugin({
			typescript: { configOverwrite: { exclude: ["./test/**/*"] } }
		}),
		// minify
		new MiniCssExtractPlugin({
			filename: "[name].bundle.[contenthash:8].css"
		}),
		new HtmlWebpackPlugin({
			favicon: "./resources/static/images/favicon.png",
			hash: true,
			template: "./resources/html/index.html"
		}),
		new CopyWebpackPlugin({
			patterns: [
				{
					from: path.join(
						__dirname,
						"node_modules/@com.mgmtp.a12.uaa/uaa-authentication-client/resources",
						"silent_renew.html"
					),
					to: path.resolve(__dirname, "build/webpack/silent_renew.html")
				},
				{
					from: path.join(__dirname, "node_modules/@com.mgmtp.a12.uaa/uaa-authentication-client/resources/images"),
					to: path.resolve(__dirname, "build/webpack")
				}
			]
		})
	],
	resolve: {
		plugins: [new TsconfigPathsPlugin()],
		extensions: [".tsx", ".ts", ".js"]
	}
};

The problem is this issue is hard to reproduce. I saw this once or twice but cannot reproduce again.
Any idea why this happen and if this have any performance issue?

Hi, did you follow the instructions about setting up the widget styling here? Widgets Showcase

If yes, I suggest contacting someone from widgets team, as client has no special logic related to styling/fonts.

Hi @chris-long-packet I did configure follow the instruction from Widget :confused:

I check and this issue only happen with Chrome developer tool in Disable Cache disabled and when run with webpack-dev-server (not nginx).
I will close the issue since it’s low priority for now.
If you face the same the problem. Feel free to comment what’s you found.