使用 SVG 图标

此示例显示如何在你的应用中使用 SVG 图标。

  1. 下载 SVG iconset / icon(在这种情况下,我们从 https://materialdesignicons.com/getting-started 获取图标。

  2. 将其保存在 assets 文件夹下或你可以访问的其他位置。

  3. 在你的 app.module.ts 中,添加以下代码:

    import { MdIconRegistry } from '@angular/material';
    import { DomSanitizer } from '@angular/platform-browser';
    
    export class AppModule {
        constructor(mdIconRegistry: MdIconRegistry, domSanitizer: DomSanitizer){
            // Note that you have to sanitize the resource since Angular will complain that it will cause XSS problems.
            // More info: https://g.co/ng/security#xss               
            mdIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('assets/icons.svg'))
        }
    }
    
  4. 通过 svgIcon 属性使用它:

    <md-icon svgIcon="menu"></md-icon>