缩小 MatIcon 的尺寸看起来很模糊，缩小尺寸的 SVG 看起来很完美答案

【问题标题】：Sizing down MatIcon looks fuzzy vs. sizing down SVG looks perfect缩小 MatIcon 的尺寸看起来很模糊，缩小尺寸的 SVG 看起来很完美
【发布时间】：2020-11-15 11:46:18
【问题描述】：

材质图标易于使用，通常看起来很棒。但是我现在需要缩小它们的大小：

<div class="status-icon">
  <mat-icon>
    remove_circle_outline
  </mat-icon>
</div>

.status-icon {
 .material-icons {
    font-size: 16px !important;
 }
}

嗯，它有效，但结果看起来有点模糊。线条远非尖锐。

于是我下载了原来的SVG，直接添加了：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="16" width="16">
  <path d="M0 0h24v24H0z" fill="none"/>
  <path d="M7 11v2h10v-2H7zm5-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
</svg>

而且看起来很完美。无论缩放 SVG 大小，它看起来都很棒。

我认为 MatIcon 也在使用 SVG。如果不是，它使用什么图像格式？有没有简单的方法告诉 MatIcon 使用 SVG 格式？

【问题讨论】：

标签： css angular svg angular-material

【解决方案1】：

Angular 材质图标使用字体图标，因此虽然它们是可扩展的，但它们仍然可能存在您可能看到的锯齿问题。

SVG 没有内置在标准 mat-icon 中，但您可以注册自己的 svg 图标并以相同的方式使用它们。

注册后，您将呈现一个像这样的 svg 图标：

<mat-icon svgIcon="thumbs-up"></mat-icon>

TS：

import {Component} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {MatIconRegistry} from '@angular/material/icon';

/**
 * @title SVG icons
 */
@Component({
  selector: 'icon-svg-example',
  templateUrl: 'icon-svg-example.html',
})
export class IconSvgExample {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'thumbs-up',
        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
  }
}

https://material.angular.io/components/icon/overview

【讨论】：