Change design of role badges in web UI (#26281)

Co-authored-by: Claire <claire.github-309c@sitedethib.com>

config/webpack/rules/index.js

@@ -1,6 +1,7 @@
 const babel = require('./babel');
 const css = require('./css');
 const file = require('./file');
+const materialIcons = require('./material_icons');
 const nodeModules = require('./node_modules');
 const tesseract = require('./tesseract');
 
@@ -8,6 +9,7 @@ const tesseract = require('./tesseract');
 // https://webpack.js.org/concepts/loaders/#loader-features
 // Lastly, process static files using file loader
 module.exports = {
+  materialIcons,
   file,
   tesseract,
   css,

config/webpack/rules/material_icons.js

@@ -0,0 +1,13 @@
+module.exports = {
+  test: /\.svg$/,
+  include: /node_modules\/@material-design-icons/,
+  issuer: /\.[jt]sx?$/,
+  use: [
+    {
+      loader: '@svgr/webpack',
+      options: {
+        svgo: false,
+      },
+    },
+  ],
+};