向下调整MatIcon看起来很模糊，而向下调整SVG看起来很完美
向下调整MatIcon看起来很模糊，而向下调整SVG看起来很完美
提问于 2020-07-25 20:45:21
材料图标易于使用，通常看起来很棒。不过，我现在需要降低它们的规模：
<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也在使用SVGs。如果没有，它使用的是什么图像格式？是否有一种简单的方法可以告诉MatIcon使用SVG格式？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-07-25 21:41:31
棱角材质图标使用字体图标，因此，虽然它们是可伸缩的，但它们仍然可以像您可能看到的那样存在别名问题。
svg没有内置到标准的mat图标中，但是您可以注册自己的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'));
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63093406
复制相关文章
相似问题
腾讯云开发者
