尝试将自定义svg添加到Angular Material图标注册表

Question

正如标题所说，我试图添加一些自定义的 svg 图标，这些图标从 https://simpleicons.org/ 下载。 我将我的图标放在应用程序的 assets 目录下名为 icons 的文件夹中。 然后，我注入了 MatIconRegistry 和 DomSanitizer 并像这样添加了 svg：

constructor(
  private matIconRegistry: MatIconRegistry,
  private domSanitizer: DomSanitizer
) {
  this.matIconRegistry.addSvgIcon(
    'facebook',
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      '/assets/icons/facebook.svg'
    )
  );
  this.matIconRegistry.addSvgIcon(
    'google',
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      '/assets/icons/google.svg'
    )
  );
  this.matIconRegistry.addSvgIcon(
    'twitter',
    this.domSanitizer.bypassSecurityTrustResourceUrl(
      '/assets/icons/twitter.svg'
    )
  );
}

我已在AppComponent中完成了这个操作。 在另一个组件中，我正在尝试使用这些图标。我已经做了这些：

<div class="form-group">
    <button class="btn-block" type="button" color="secondary" mat-flat-button>
        <mat-icon>twitter</mat-icon> Continue with
        facebook
    </button>
</div>

<div>
    <button class="btn-block" type="button" color="secondary" mat-flat-button>
        <mat-icon>twitter</mat-icon> Continue with
        google
    </button>
</div>

但是没有显示任何图标。 我想添加到AppComponent中将允许在任何地方使用图标。这是一个错误的假设吗？

- r3plica

Answer 1

您需要稍微不同的方式引用图标：

<mat-icon svgIcon="twitter"></mat-icon>

- Gunnar B.

---

啊，这在我正在阅读的教程中提到过，但我以为它是针对旧版本的Angular Material！我真傻；等我可以时，我会将其标记为答案。 - r3plica

有什么想法如何解决对齐问题吗？它没有填充、边距或任何东西，但似乎不能居中对齐 :o - r3plica

如果图标略低于中心位置，您可以在图标底部添加一些填充（例如2px）。从我遇到的情况来看，这似乎是matIcon普遍存在的问题。（vertical-align: middle对我没有用。） - Gunnar B.

我通过添加一个类规则来解决了这个问题，该规则将垂直对齐设置为顶部，现在它可以正常工作了。 - r3plica