Creating A CSS Sprite Builder for Material Icons

Why Create This

While my design system can't really utilize svg sprites because of the ability to change application size and the customization of svg colors, I wanted to build a simplistic sprite builder with material icons in case I ever create a site in the future that is more static and where speed is really important or just to see the best way to create a CSS Sprite. To learn about the advantage of using CSS Sprites, read this CSS Sprites article.

How To Use Sprite Builder

1. Search the name of the Material icon that you want to add to the CSS Sprite. Click on the icon in the results that you want to add to the sprite.
2. Edit the color and width/height of the icon that you want to add to the sprite.
3. Add the icon to the sprite.
4. Continue adding icons to the sprite until all the icons that you want to add to the CSS sprite are included in the sprite (view a preview of the sprite in the Current Sprite Section.)
5. To delete an svg, click on the svg on the canvas and click delete.
6. Once finished, click download.

Edit CSS Sprite