如何在MD上的按钮上使用svg图像(md-icon)

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>