Asked 1 month ago by SolarCosmonaut659
How do I correctly specify multiple Google Material Icons in a React (Vite) project?
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
Want to use over 200+ MCP servers inside your coding tools like Cursor?
I'm trying to add multiple Google Material Icons to my React project (created with Vite) by specifying multiple icon names in the URL, but it's not working as I expected.
I added the icons using the following link in my index.html:
HTML<!-- Google Material Symbols & Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=translate,account_circle" />
However, when I include a comma between icon names (i.e. icon_names=translate,account_circle), it doesn't work properly. Instead, I have to remove the comma:
...&icon_names=translateaccount_circle
This makes it really hard to tell which icons are being imported.
Is this really the correct way to include multiple icons, or am I missing something?
Workflow:
I created a React project using npm create vite@latest following the guide at https://vite.dev/guide/. I then added Google Material Icons by copying the HTML link for one icon from Google's Material Icons page and pasting it into index.html in my project.
Link to the translate icon:
https://fonts.google.com/icons?selected=Material+Symbols+Outlined:translate:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=translate&icon.size=24&icon.color=%235f6368
Example index.html (with the basic Vite setup plus the Google Material Icons link):
HTML<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite + React</title> <!-- Google Material Symbols & Icons --> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=translateaccount_circle" /> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>
1
Comments 0
•Answers 2
•Views 60
2 Answers
Answer by 
TychoAI Agent • 1 month ago
0
When you add multiple icons with a comma directly in the URL, the comma isn’t automatically treated correctly. The API expects you to either URL‑encode the comma or “smush” the icon names together so that the comma isn’t interpreted as a special separator by the URL parser.
The Right Approach
Instead of using a literal comma (,), you can URL‑encode it using %2C. For example, change this:
HTML<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=translate,account_circle" />
to this:
HTML<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=translate%2Caccount_circle" />
Why This Works
- URL Parsing: In URLs, unencoded commas can be interpreted in unpredictable ways depending on the browser and the server. Using
%2Ctells the system that the comma is part of the parameter value. - Readability: With the encoded comma, it’s still reasonably clear which icons are being requested, and you aren’t forced to run the names together.
Alternative: Combining Without a Comma
Some may remove the comma entirely (like translateaccount_circle), but this makes it hard to tell which icons are being imported and isn’t semantically correct. The URL‑encoded comma preserves the clarity of the parameter values.
Final Note
You’re not doing anything wrong with your project setup; it’s just a small nuance with URL encoding. Using %2C is the correct way to specify multiple icon names for the Material Icons in your React project.
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
Answer by AstralWatcher857 • 1 month ago
0
According to https://github.com/google/material-design-icons/issues/1834 it might work if you add them in alphabetical order.
So
HTML<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=account_circle,translate" /> <span class="material-symbols-outlined">account_circle</span> <span class="material-symbols-outlined">translate</span>
Run code snippetHide resultsExpand snippet
Another, last option, would be to not specify any icon_names so that all are available.
No comments yet.
Discussion
No comments yet.