One Day Project: Material Finder
January 30, 2025
Hi, it’s the second article in the series of one-day projects. In this article, I want to tell the story of a one-day project called Material Finder. It’s a simple web application that allows users to download an icon from the Material Design Icons library.
Problem
There is a nice library of icons called Material Design Icons developed and supported by Google. I have been using these icons since the first day I needed an icon for a project (years ago). There is a nice web interface for these icons: Google Fonts. For a long time, there was an option to download the icon in a specific size for a specific platform: iOS, Android, or web (.svg). But some time ago, this option was removed. Now, I need to find an icon using this app and then go to the icons repository, manually find the version I need, and download it. This workflow was acceptable for a while, but one day, I had enough of it.
Idea
Since the missing feature to download a specific format of the icon was bothering me for some time, I made a list of features I wanted in the app:
- Sleek design
- Search for the icons
- Option to choose the icon version: regular, outlined, round, sharp, two-tone
- Option to download the icon of the selected version in a specific format: SVG, PNG, iOS, Android
- Option to copy the selected icon as SVG code
Development Process
One Saturday morning, after a cup of tea, I reminded myself that I wanted to create an app for icons. After writing down all the requirements, I started scaffolding the project with Vite. Within a few hours, I had a working frontend application that displayed all the icons from the font, which includes all the icons in the pack. However, I encountered a few problems:
- I couldn’t use search functionality.
- I couldn’t use this data to download different versions of the icons.
Initially, I thought this project wouldn’t require a backend and that everything could work within the web app. Maybe there’s a way to achieve the same result without a backend, but I didn’t have time to explore such a solution. Instead, I quickly added a backend that parses all the icons by format and version. This backend allows downloading the desired format of a specific icon as a ZIP file.
At the initialization stage of the web app, all icons are fetched from the backend as a map of icons categorized by type and format. The response also includes a font key and information about the supported formats for each icon (since not all icons have all formats). To download a specific icon, the frontend sends a GET request to the backend with the icon key and format. The response is a ZIP, SVG, or PNG file.
I had an idea to add a color or size selector, but the app was already good enough for my needs, so I decided to drop that idea.
Result
Material Finder
This project took exactly one day to develop and deploy. It was truly a one-day project. You can find the final result here. If you’re interested in the open-source code, it’s available on GitHub. The repository contains only the frontend part since this project is not intended to be a self-hosted app. The backend is part of my personal server. Currently, I don’t have any plans to migrate the backend code to the repository (probably because the backend code is quite messy as I focused on making it work rather than making it readable). Perhaps I’ll add the backend code to the repository in the future, but for now, there are no plans to do so.
In summary, the application has all the needed features:
- Search for the icons
- Option to choose the icon version: regular, outlined, round, sharp, two-tone
- Option to download the icon of the selected version in a specific format: SVG, PNG, iOS, Android
- Option to copy the selected icon as SVG code
Let me know if you need further modifications!