Angular SVG图标大小

Question

我正在制作一个AngularJS应用程序，并且我正在使用在https://materialdesignicons.com/上找到的图标。 然而，在我的项目中创建大型图标时遇到了问题。目前我是按如下方式分配图标。

app.config(function($mdIconProvider) {
$mdIconProvider
    .defaultIconSet('assets/icon/materialdesignicons.svg')
    .iconSet(['large'], 'assets/icon/materialdesignicons.svg');

我知道默认大小是24px，但如果我输入48这样的数字，图像会缩小而不是变大。我应该输入什么代替large？

我应该输入一个比较大的数字来代替large。例如，你可以尝试输入72或96来增加图片的大小。

- Ian Shinbrot

---

该参数并不设置图标的大小，而是为SVG设置视口大小。请参见此处：https://github.com/angular/material/issues/1785 - gaurav5430

为什么默认字体大小是24像素？ - N.K

Answer 1

1. 如果您的图标svg元素具有viewBox属性，则不会被$mdIconProvider大小属性覆盖。

2. 大小参数定义了viewBox的高度和宽度。viewBox只影响SVG元素的坐标系。它应该与您的图标尺寸匹配；如果不匹配，md-icon可能会显示图标的缩放视图。

   然而，md-icon元素的实际大小将由其高度和宽度（用CSS定义）定义；SVG元素将在md-icon内部进行缩放。

---

viewBox是SVG元素缩放的要求。它设置要显示其网格的哪个部分以及SVG元素中的元素应如何与其缩放。它仅不决定图标的实际大小，而是随着md-iconelement大小增长。

• 如果未设置viewBox，则SVG元素将不会缩放（这是jQuery的错误）；一个单位将是1像素，无论SVG元素大小如何。
• 如果您将大小设置为小于SVG网格的大小（例如24x24网格的“0 0 12 12”），则会缩放到图标的左上角。
• 如果您将大小设置为大于网格的大小（例如24 x 24网格的“0 0 48 48”），则会缩小并将图标放置在SVG元素的左上角。

您可以在此处找到更多详细信息。

- Charlie

---

我认为默认情况下视口默认设置为24。我取消了对jQuery的依赖。 我还手动设置了图标大小和高度，但仍存在问题。 设置宽度和高度仍然无法解决问题。 更改md-icon的CSS也无法解决问题。 - Ian Shinbrot

你正在经历参数的自然行为。请仔细阅读我的文字：viewBox是一个用于缩放svg元素的要求。它设置了要显示其网格的哪个部分以及svg元素中的元素如何与之缩放。它只是不决定图标的实际大小，而是随着md-iconelement的大小而增长。 - Charlie

Answer 2

我成功地找出了问题所在。图标被用作按钮，但是除了图标之外，我还给按钮添加了md-icon-button类。从按钮中删除该类修复了该问题。

- Ian Shinbrot