Question

如何使用 vanilla CSS，HTML或JS 更改Angular 2+ Material Design上SVG图标的大小？

如果我在HTML元素中指定图标，样式工作正常：

<mat-icon style="font-size: 16px !important">home</mat-icon>

但是，当我使用svgIcon属性时（例如，如果使用第三方图标库），则无法调整图标大小：

<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>

我知道SVG的扩展比较复杂，我可以使用viewBox属性。但是，我甚至无法访问<svg>内的<mat-icon>子元素来执行丑陋的JS hack。使用vanilla CSS有一种直接的方式吗？甚至是Angular组件的丑陋黑客？

额外信息：我正在使用https://materialdesignicons.com中的mdi.svg图标库来获取我的Angular项目的其他图标。但是，要使用这些，我必须使用svgIcon属性。

Answer 1

库样式似乎会覆盖你的css内联声明。尝试将!important声明添加到您的样式中：style="font-size: 16 !important"或者由于您没有提供更多代码，请尝试检查此图标节点，以检查定义字体大小的样式。

同时检查here

<强>更新：

这是另一个可行的解决方案。为要调整大小的svg元素添加transform: scale(2);样式，其中2是实际大小的200％（当然，您也可以使用例如0.5值50％来缩小它们的大小）。以下是带有图标和link to documnetation的网站的工作示例：

.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}

Answer 2

我玩这个太久了。

我有一系列图标，我希望缩放以适应各种<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div></div>尺寸，但每个图标需要不同的比例，以便它们与其他图标平衡 - 有效地增加了viewBox的大小。

最后这种方法运作良好：

mat-icon

然后我用mat-icon { width: 50px; height: 50px; display: flex; flex-shrink: 0; justify-content: center; outline: 1px dashed red; // for testing & ::ng-deep svg { align-self: center; } &.shrink-90 ::ng-deep svg { width: 90%; height: 90%; } &.shrink-80 ::ng-deep svg { width: 80%; height: 80%; } }

创建mat-icon

iconCss='shrink-80'

<mat-icon svgIcon="{{ feature.name }}" [ngClass]="feature.iconCss"></mat-icon>本身可以使用您想要的任何其他类进行缩放（就像您对普通图标一样）。然后＆＃39;收缩＆＃39;调整框内的大小。

Answer 3

这是我在mat-icon 6.0.0

中更改@angular/material2尺寸的方法

虽然在这种方法中，只有SVG图标会改变它的大小，如果你使用的是mat-icon-button。如果您的新尺寸太大，只需调整mat-icon button的尺寸即可。如果它是普通的mat-icon，你不需要考虑这个。

.mat-icon {
   font-size: /* your size here */;
}

Answer 4

采用@mpro解决方案，我做了一些对我来说更有效的更改（我有自定义图标，也许这就是原因）：

  <!-- Set your wants -->
    @mixin anything{
      font-family: "Aleo", sans-serif;
      font-weight: 700;
      margin: 0 0 20px 0;
      line-height: 1.5;
      color:#000; 
    }

<!-- and assign to your tag. -->
  h2{
      @include anything;
      font-size: 44px;
    }

或scss解决方案：

mat-icon[size="2"]{
  width: 48px;
  height: 48px;
}

mat-icon[size="2"] svg{
  transform: scale(2);
  transform-origin: left top;
}

Answer 5

在Angular Material 2中，可以在元素中使用属性[inline] =“ true”。根据文档“是否应该内嵌图标，自动调整图标的大小以匹配包含图标的元素的字体大小”。因此，如果您的Mat图标位于div元素内，则可以在div元素中设置字体大小样式，而这将由mat-icon继承。

<div class="parent" style="font-size:2em"> <mat-icon>play_arrow</mat-icon> </div>

Answer 6

在我的应用程序中，使用Material 7，我只是更改了CSS中“ mat-icon”元素的宽度和高度（当然是！important），它对我来说就像是一种魅力。

例如：

mat-icon {
    width: 32px !important;
    height: 32px !important;
}

使用vanilla CSS或HTML更改Angular Material 2 <mat-icon>中的SVG大小

6 个答案: