我在哪里可以找到（或制作）密集布局的 Material Design 图标集（20dp，桌面）

Question

谷歌材料设计指导says：

在桌面上，当鼠标和键盘是主要输入法时，测量可能会缩小到 20dp。

此外，我发现新的 Gmail 使用 20dp 大小的图标
（屏幕截图是在非高 DPI 显示器上拍摄的）：

---

---

同时，我在任何地方都找不到这种大小的 MD 图标。 Google MD icons 仅提供 18dp、24dp 和更大的分辨率。 repository 中的相同内容。但我需要 20dp 的大小。

我尝试使用icomoon.io将网格更改为20px，并尝试使用20px大小的图标字体。当然，这两种方法都会产生模糊的图标。

在哪里可以找到它们？
或者，我如何放大/缩小现有的 MD 图标？

更新：

这是来自 Gmail 的原始图标（20 像素）： https://www.gstatic.com/images/icons/material/system/1x/archive_black_20dp.png

   

这是 SVG，具有 24 像素和所需的 20 像素大小。 在我的非高 DPI 屏幕上，这个 20 像素的 SVG 是模糊的。

<svg width='24' height='24' viewBox='0 0 24 24'><title>account balance</title>
<g id="g">
    <path d='M0 0h24v24H0z' fill='none'></path>
    <path d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'></path>
</g>
</svg>

<svg width='20' height='20' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>

Answer 1

您可以使用 SVG 属性 - shape-rendering ="crispEdges " 来禁用浏览器抗锯齿功能。

https://developer.mozilla.org/ru/docs/Web/SVG/Attribute/shape-rendering

crispEdges

表示用户代理应尝试强调对比度 在艺术品的干净边缘之间超过渲染速度和几何 精确。为了获得清晰的边缘，用户代理可能会关闭 所有直线和曲线的抗锯齿，或者可能只是直线 接近垂直或水平的线条。此外，用户代理 可能会调整线条位置和线条宽度以将边缘与设备对齐 像素。

<svg width='24' height='24' viewBox='0 0 24 24'><title>account balance</title>
<g id="g" shape-rendering="crispEdges">
    <path d='M0 0h24v24H0z' fill='none'></path>
    <path d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'></path>
</g>
</svg>

<svg width='20' height='20' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>

Answer 2

.svg 元素可以采用任何你想要的大小。

svg{border:1px solid;}

<svg width='15' height='15' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>


<svg width='24' height='24' viewBox='0 0 24 24'><title>account balance</title>
<g id="g">
    <path d='M0 0h24v24h-24z' fill='none'></path>
    <path d='M4 10v7h3v-7h-3zm6 0v7h3v-7h-3zm-8 12h19v-3h-19v3zm14-12v7h3v-7h-3zm-4.5-9l-9.5 5v2h19v-2l-9.5-5z'></path>
</g>
</svg>

<svg width='48' height='48' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>

<svg width='60' height='60' viewBox='0 0 24 24'><title>account balance</title>
<use xlink:href="#g" />
</svg>

更新

这是 OP 更新问题的答案：

我对您的代码进行了一些更改，现在您有了一个 20/20 像素的 svg： 您的图标在图像周围有很多空白区域。我已经删除了那个空间。

<svg width='20' height='20' viewBox='3 3 18 18'><title>account balance</title>
<g id="g">
    <path d='M0 0h24v24H0z' fill='none'></path>
    <path id="B" d='M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z'></path>
</g>
</svg>