Creating Custom Material UI Icons From SVG Sprite in React

Material UI (MUI) library is a well-known React UI tools that help you build UIs in React more easily and quickly. It provides its own set of material icons, but also allows you to use your own SVG icons.

It works perfect when you have s single SVG image. However, certain issues occur when you try to implement using many custom icons from an SVG sprite. An SVG sprite allows you to reduce the number of image requests your site issues, and the total overall bundle size. Ideally, they allow you to use a single file as the source of all your icons for an application. For that reason, it’s definitely worth exploring how to use these two technologies together.

Note: This blog post is devoted to very specific but important issue that almost broke my brain before I came up with an appropriate solution. In the future, we could expand on my solution, and perhaps resolve this issue in an even more elegant way. Until then, below is the solution I came up with.

Steps To Use Custom SVG Sprite Icons in MUI

The steps for implementing SVG sprites in MUI components sounds quite simple and obvious:

  1. Create the SVG sprite itself, if you don’t already have one in your project
  2. Create the correct import of the sprite file
  3. Extract and display required icon in MUI Material components

Creation of SVG Sprite

This should be the simplest part of the plan. The approach totally depends on your preferences, but however you set it up, the internal structure of the sprite should end up looking something like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg ….>
    <svg ….>...</svg>
    <svg ….>...</svg>
</svg>

It is worth mentioning that NPM package called “svg-sprite” is perfect for this job. To use it, the svg-sprite package should be added as dev dependency in your project. There are a lot of options this sprite builder can started with, you can investigate them all by its official documentation’s linked above.

Among other options, it allows you to specify both source and destination folders, names of files, and build type. For my purposes, the output file can be built as stack, so I used the CLI options for this in my build script

Correct Import of the SVG Sprite File

The official MUI documentation for SVG icon offers us a particular package that can help to resolve SVG’s files correctly while being imported into React component. Please see an example below. It shows clearly how we can manage an import of the SVG file:

// webpack.config.js
{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader'],
}

As you can see, this required modification of webpack.config.js file and installation of “svgr/webpack” and “url-loader” as a dev-dependencies. We need all of that stuff for correct resolving of the path to SVG file, whether it will be a single icon or a combined SVG sprite.

Apply the Imported SVG Sprite to MUI Components

The MUI library suggests to use its <SVGIcon /> component as a wrapper for our custom icons. There are several way to implement this as a solution. Examples below are the most common methods:

1. Directly pass imported icon as a prop, like this:

import { ReactComponent as StarIcon } from './star.svg';

<SvgIcon component={StarIcon} />

This is a nice way for a icon that’s a single file.

2. Pass icon’s SVG markup as a children. That can be done with HTML-element <use /> which points onto the path to an icon or sprite file, like this:

<SvgIcon>
	<use xlinkHref=’path-to-your-SVG-file’ />
<SvgIcon />

3. There’s a more exotic way that is similar to the option described above. You should somehow extract <path> element from your SVG file and pass it as a child to MUI component:

<SvgIcon>
         <path …> // full copy from child HTML element of you SVG file goes 
                    // there
<SvgIcon />

A Working Solution

So let’s create out custom React component as a wrapper for <SvgIcon> that allows us render icon from an SVG sprite in a MUI component. My working code example looks like this:

import React from 'react';
import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
import Sprite from ‘path-to-your-sprite’;
interface IProps extends SvgIconProps {
    iconName: string;
}
const CustomMUIIcon : React.FC<IProps> = (props: IProps): JSX.Element => {
    const { iconName, ...rest } = props;
    return (
        <SvgIcon {{...rest}}>
            <use xlinkHref={`${Sprite}#${iconName}`} />
        </SvgIcon>
    );
};
export default CustomMUIIcon;

You can customize it using properties from SvgIconProps, and your should point out the name of the icon that is equal to name of icon’s ID in the SVG sprite file.

This solution is easy to implement and works just fine, until…

The Main Pitfall of the <use> Element

You get a result of your icon rendering that is far from expected if the original SVG icon has internal links to be resolved. For example (unnecessary attributes are omitted):

<svg>
    <defs>
        <path id="path_id" d="…….."/>
    </defs>
    <g>
        <mask id="mask_id">
            <use xlink:href="#path_id"/>
        </mask>
        <g mask="url(#mask_id)">
            <path d="……."/>
        </g>
    </g>
</svg>

That is not an issue of MUI library itself. Browsers do not support masks or clipPaths rendering inside external <use> elements. You can try it out with plain HTML file and the result will be the same – unpredictable rendering of internal paths.

Using Dynamic Import Instead

The answer is all about using dynamic import to bring in the icon as a React component from the SVG sprite, and using it as a property of the <SvgIcon /> component. It works well with a single file and it resolves internal references correctly, so all your masks and clipPaths display as expected.

My proposed solution would look something like this:

import React, {useState, useEffect} from 'react';
import SvgIcon, {SvgIconProps} from '@mui/material/SvgIcon';
import Sprite from 'path-to-your-sprite';
interface IProps extends SvgIconProps {
    iconName: string;
}
const CustomMUIIcon: React.FC<IProps> = (props: IProps): JSX.Element => {
    const { iconName } = props;
    const [ iconComponent, setIconComponent ] = useState(null);
    useEffect(() => {
        import(`${Sprite}#${iconName}`)
            .then((result) => {
                const { ReactComponent as Icon } = result;
                setIconComponent(Icon);
            })
            .catch((error) => {
                // do some usefull stuff here
            })
    }, [ iconName ]);
    return (
        <>
            { iconComponent && <SvgIcon component={iconComponent} /> }
        </>
    );
};
export default CustomMUIIcon;

This doesn’t work because it imports the whole sprite file instead of the addressed icons. As a possible solution, I suggest parsing the HTML markup of the imported SVG file, extracting the innerHTML for all the named icons, and injecting it into <SvgIcon />. My main concern is the performance will be unnecessary affected.

Solution – Old but Gold

Let’s inject the SVG sprite on the root level of the application and allow the browser to resolve all internal paths in the wild, so to speak. This solution comes from old approach that allows you to resolve SVG sprites on server-side rendered web-sites. We hide the sprite file with CSS properties. Our custom material icon component just resolve path to icon with a regular href.

const CustomMUIIcon: React.FC<IProps> = (props: IProps): JSX.Element => {
    const {iconName, ...rest} = props;
    return (
        <SvgIcon {{...rest}}>
            <use xlinkHref={`#${iconName}`}/>
        </SvgIcon>
    );
};
export default CustomMUIIcon;


import React from 'react';
import { ReactComponent as Sprite } from 'path-to-your-sprite';

const styles = {
    height: 0,
    opacity: 0
};

const SvgSprite: React.FC = (): JSX.Element => {
    return (
        <div style={styles}>
            <Sprite/>
        </div>
    );
};
export default SvgSprite;

Conclusion

The suggested method looks a bit cumbersome, but it works as a good solution, allow you to apply custom icons from an SVG sprite to MUI components in a React application. Also, keep in mind that the solution using the dynamic import of component needs to be investigated with a strict condition to avoid negatively impacting the performance and memory usage.

Related Blog Posts

We hope you’ve found this to be helpful and are walking away with some new, useful insights. If you want to learn more, here are a couple of related articles that others also usually find to be interesting:

Our Gear Is Packed and We're Excited to Explore With You

Ready to come with us? 

Together, we can map your company’s software journey and start down the right trails. If you’re set to take the first step, simply fill out our contact form. We’ll be in touch quickly – and you’ll have a partner who is ready to help your company take the next step on its software journey. 

We can’t wait to hear from you! 

Main Contact

This field is for validation purposes and should be left unchanged.

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the form below. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Montage Portal

Montage Furniture Services provides furniture protection plans and claims processing services to a wide selection of furniture retailers and consumers.

Project Background

Montage was looking to build a new web portal for both Retailers and Consumers, which would integrate with Dynamics CRM and other legacy systems. The portal needed to be multi tenant and support branding and configuration for different Retailers. Trailhead architected the new Montage Platform, including the Portal and all of it’s back end integrations, did the UI/UX and then delivered the new system, along with enhancements to DevOps and processes.

Logistics

We’ve logged countless miles exploring the tech world. In doing so, we gained the experience that enables us to deliver your unique software and systems architecture needs. Our team of seasoned tech vets can provide you with:

Custom App and Software Development

We collaborate with you throughout the entire process because your customized tech should fit your needs, not just those of other clients.

Cloud and Mobile Applications

The modern world demands versatile technology, and this is exactly what your mobile and cloud-based apps will give you.

User Experience and Interface (UX/UI) Design

We want your end users to have optimal experiences with tech that is highly intuitive and responsive.

DevOps

This combination of Agile software development and IT operations provides you with high-quality software at reduced cost, time, and risk.

Trailhead stepped into a challenging project – building our new web architecture and redeveloping our portals at the same time the business was migrating from a legacy system to our new CRM solution. They were able to not only significantly improve our web development architecture but our development and deployment processes as well as the functionality and performance of our portals. The feedback from customers has been overwhelmingly positive. Trailhead has proven themselves to be a valuable partner.

– BOB DOERKSEN, Vice President of Technology Services
at Montage Furniture Services

Technologies Used

When you hit the trails, it is essential to bring appropriate gear. The same holds true for your digital technology needs. That’s why Trailhead builds custom solutions on trusted platforms like .NET, Angular, React, and Xamarin.

Expertise

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

  • Project Management
  • Architecture
  • Web App Development
  • Cloud Development
  • DevOps
  • Process Improvements
  • Legacy System Integration
  • UI Design
  • Manual QA
  • Back end/API/Database development

We partner with businesses who need intuitive custom software, responsive mobile applications, and advanced cloud technologies. And our extensive experience in the tech field allows us to help you map out the right path for all your digital technology needs.

Our Gear Is Packed and We're Excited to Explore with You

Ready to come with us? 

Together, we can map your company’s tech journey and start down the trails. If you’re set to take the first step, simply fill out the contact form. We’ll be in touch – and you’ll have a partner who cares about you and your company. 

We can’t wait to hear from you! 

Thank you for reaching out.

You’ll be getting an email from our team shortly. If you need immediate assistance, please call (616) 371-1037.