如何在MD（md-icon）中的按钮上使用svg图像

Question

我已经尝试过这种形式，但它不起作用：

<button md-icon-button color="primary">
  <md-icon md-svg-src="./assets/img/sprites.svg">menu</md-icon>
</button>

和这个：

<md-icon svgSrc="./assets/img/sprites.svg">menu</md-icon>

如何将svg图像放在按钮上。

---

更新：

我在看这个

<button md-icon-button color="primary">
<img src="./assets/img/sprites.svg" style="max-width:25%"/>
</button>

但我不知道这是否是正确的方法。

Answer 1

在代码中的某处注入MdIconRegistry：

import { MdIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

constructor(
    private mdIconRegistry: MdIconRegistry,
    private sanitizer: DomSanitizer) {
...

稍后注册您的svgs（ngOnInit（）是一个好地方）：

ngOnInit() {
    this.mdIconRegistry.addSvgIconInNamespace('img', 'sprites',
        this.sanitizer.bypassSecurityTrustResourceUrl('/assets/img/sprites.svg'));
}

然后在您的组件中可以使用svg：

<md-icon svgIcon="img:sprites" color="primary"></md-icon>