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>

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

1 个答案: