如何通过原生CSS/HTML/JS修改Angular Material <mat-icon>的SVG图标大小？

我之前也碰到过这个头疼的问题——用Angular Material的svgIcon属性加载第三方图标时，死活调不了大小，直接写SVG代码却没问题。其实核心是Angular的样式隔离在搞鬼，不过有几个直接可行的解决办法，亲测有效：

• 方案一：用CSS穿透突破样式隔离
  Angular的视图封装会阻止组件样式直接选中<mat-icon>内部的<svg>元素，这时候可以用::ng-deep穿透隔离，直接给内部SVG设置尺寸：

  /* 全局或组件内生效，指定目标图标 */
  ::ng-deep mat-icon[svgIcon="your-target-icon"] svg {
    width: 48px;
    height: 48px;
  }
  

  如果你不想让样式全局影响，记得配合组件选择器限定范围，避免污染其他组件：

  .your-component-class ::ng-deep mat-icon[svgIcon="your-target-icon"] svg {
    width: 48px;
    height: 48px;
  }
  

• 方案二：直接控制mat-icon容器尺寸
  <mat-icon>本身是一个inline-block容器，只要SVG的viewBox属性设置正确（第三方图标库基本都做好了这一点），直接给<mat-icon>设置width和height，内部SVG会自动缩放适配容器：

  <!-- 内联样式快速测试 -->
  <mat-icon svgIcon="your-target-icon" style="width: 32px; height: 32px;"></mat-icon>
  

  也可以写个复用的CSS类：

  .icon-large {
    width: 32px;
    height: 32px;
    font-size: inherit; /* 覆盖mat-icon默认的font-size关联逻辑 */
  }
  

  然后在模板里使用：

  <mat-icon svgIcon="your-target-icon" class="icon-large"></mat-icon>
  

• 方案三：注册图标时自定义尺寸
  如果你是通过MatIconRegistry手动注册SVG图标，可以在注册后修改SVG元素的属性，一次性搞定全局尺寸：

  import { DomSanitizer } from '@angular/platform-browser';
  import { MatIconRegistry } from '@angular/material/icon';
  
  constructor(
    private iconRegistry: MatIconRegistry,
    private sanitizer: DomSanitizer
  ) {
    const svgPath = this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/your-icon.svg');
    // 注册后获取SVG元素修改尺寸
    this.iconRegistry.addSvgIcon('your-target-icon', svgPath).then(icon => {
      const svgElement = icon.svgElement;
      svgElement.setAttribute('width', '48px');
      svgElement.setAttribute('height', '48px');
    });
  }
  

  这个方法适合需要全局统一修改某个图标尺寸的场景，不用在每个使用的地方重复加样式。

简单说下原因：直接写SVG代码时，元素属于当前组件的DOM树，样式能直接选中；而svgIcon加载的图标是MatIcon组件内部渲染的，受Angular视图封装的隔离保护，所以需要用穿透、容器适配或者注册时修改这几种方式来绕开限制。

内容的提问来源于stack exchange，提问作者Gerardo Figueroa