When I try to add multiple icon names for Google Material Icons in a React project, I can't add multiple icons separated by a comma like it should be:
<!-- Google Material Symbols & Icons -->
<link rel="stylesheet" href="+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=translate,account_circle" />
here:
...&icon_names=translate,account_circle" />
Instead I need to remove the comma like this:
...&icon_names=translateaccount_circle" />
But then it becoms really hard to see which icons are imported.
Is this really the correct way, or am I doing something wrong?
Workflow:
I created a React project (React/JavaScript) with the vite command npm create vite@latest (source: /guide/).
I added Google Material Icons by copying the html link for one icon from Google's page with Material Icons. I pasted it into the element in index.html in the React project.
Link to the translate icon from Google Icons: +Symbols+Outlined:translate:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=translate&icon.size=24&icon.color=%235f6368
Code from index.html:
(just the basic setup you get from using vite to create the project + the google material icons link)
<!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="+Symbols+Outlined:opsz,wght,FILL,[email protected],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>
When I try to add multiple icon names for Google Material Icons in a React project, I can't add multiple icons separated by a comma like it should be:
<!-- Google Material Symbols & Icons -->
<link rel="stylesheet" href="https://fonts.googleapis/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=translate,account_circle" />
here:
...&icon_names=translate,account_circle" />
Instead I need to remove the comma like this:
...&icon_names=translateaccount_circle" />
But then it becoms really hard to see which icons are imported.
Is this really the correct way, or am I doing something wrong?
Workflow:
I created a React project (React/JavaScript) with the vite command npm create vite@latest (source: https://vite.dev/guide/).
I added Google Material Icons by copying the html link for one icon from Google's page with Material Icons. I pasted it into the element in index.html in the React project.
Link to the translate icon from Google Icons: https://fonts.google/icons?selected=Material+Symbols+Outlined:translate:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=translate&icon.size=24&icon.color=%235f6368
Code from index.html:
(just the basic setup you get from using vite to create the project + the google material icons link)
<!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/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],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 Answer
Reset to default 2According to https://github/google/material-design-icons/issues/1834 it might work if you add them in alphabetical order.
So
<link rel="stylesheet" href="https://fonts.googleapis/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],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>Another, last option, would be to not specify any icon_names so that all are available.