Material-design-icons: No more white icons?

Created on 11 Jun 2018 · 6Comments · Source: google/material-design-icons

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

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

The old interface was better...

Source

nolawnchairs

👍9

Most helpful comment

@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 :smiley:. 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.

AuthorOfTheSurf on 30 Nov 2018

👍3

All 6 comments

@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.

processnotproduct on 11 Jul 2018

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.

nolawnchairs on 19 Jul 2018

👍1

Just use the