No more white icons?

[nolawnchairs]

https://material.io/tools/icons/?icon=menu&style=baseline

I select the white icon, but the black one downloads.

The old interface was better...

[processnotproduct]

@mweiczorek if you click the dark grey area in the bottom left of the side nav, next to the blue button with the download icon and svg 24, the options panel pops up allowing you to select either black or white.

Depending on the application of the icon you can also color it yourself programmatically.

[nolawnchairs]

Yeah, I did that obviously.
The problem is that when I try and download the white icon as SVG, what downloads is the black icon. There are no clues within the SVG itself as to how to alter the fill color.

[speichs]

Just use the <style> element in the svg and use selectors to set color on path you want
ex.

<style>
  #Outline path{
    fill: #FF0016
  }
</style>

[hjchin]

Sample with white color.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#FFFFFF" d="M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z"/></svg>

[AuthorOfTheSurf]

@mweiczorek To be clear, and to add on to @hjchin 's solution, to fix this you will need to set the fill value of one (and possibly more) paths in the svg. Here is an example of me updating their arrow_back icon to be white:

before:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
</svg>

after:

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M0 0h24v24H0z" fill="none"/>
    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" fill="#FFFFFF"/>
</svg>

The first path there happens to be the background, so fill="none" is correctly used to make it transparent. The second path is the path that draws the back arrow icon itself.

Hope this is helpful 😃. My team is using individually downloaded svgs to prevent the bloat that would come with importing the whole @material-ui library just for a few icons.

[kazukitomiyama]

Good

[RoelN]

Looks like this works now!

On red background:

[Roman-Port]

This was working for a while, even after being moved to fonts.google.com, but within the last month or so it appears to have broken again.

TO REPRODUCE:

• Head over to the Google Material fonts page here
• Switch from "Material Symbols" to "Material Icons" (to the left of the search bar)
• Select any icon
• Change the color from "black" to "white"
• Click the download SVG button
• View the SVG and see that it is black instead of white

Doubt it matters, but I'm on Chrome 103.0.5060.134 running under Windows 10. It's not a big deal to manually fix the file by editing it, but it's still frustrating that it's broken again. Thanks!

[MoctarHaiz]

Today there is no option to download the white symbols in Google Material fonts.
A workaround :

1. Go to the Google Material fonts page here
2. Choose “Material Symbols” (to the left of the search bar)
3. Select an icon
4. Change the settings you prefer
5. Click download SVG
6. Open the SVG in a text editor, you will see something like: <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M10 40V19L24.05 8.45 38 19v21H27.85V27h-7.7v13Zm1.55-1.55h7.05V25.5h10.8v12.95h7.05v-18.7l-12.4-9.35-12.5 9.35Zm12.45-14Z"/></svg>
7. and add fill="#fff“ as an option for the . You'll get something like <svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="#ff0" d="M10 40V19L24.05 8.45 38 19v21H27.85V27h-7.7v13Zm1.55-1.55h7.05V25.5h10.8v12.95h7.05v-18.7l-12.4-9.35-12.5 9.35Zm12.45-14Z"/></svg>

[scarletquasar]

Today there is no option to download the white symbols in Google Material fonts. A workaround :

1. Go to the Google Material fonts page [here](https://fonts.google.com/icons)

2. Choose “Material Symbols” (to the left of the search bar)

3. Select an icon

4. Change the settings you prefer

5. Click download SVG

6. Open the SVG in a text editor, you will see something like: `<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M10 40V19L24.05 8.45 38 19v21H27.85V27h-7.7v13Zm1.55-1.55h7.05V25.5h10.8v12.95h7.05v-18.7l-12.4-9.35-12.5 9.35Zm12.45-14Z"/></svg>`

7. and add `fill="#fff“` as an option for the . You'll get something like `<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path fill="#ff0" d="M10 40V19L24.05 8.45 38 19v21H27.85V27h-7.7v13Zm1.55-1.55h7.05V25.5h10.8v12.95h7.05v-18.7l-12.4-9.35-12.5 9.35Zm12.45-14Z"/></svg>`

This workaround is bad, what about people that want to download a white png?