zoukankan      html  css  js  c++  java
  • angular图标集的注册

    material图标集允许把多个图标分组到一个单一的 SVG 文件中。它可以通过创建一个单根 <svg> 标记来完成,该标记在其 <defs> 部分包含多个内嵌的 <svg> 标记。 每个内嵌标记都带有一个 id 属性,该属性就会用作图标的名字。

    图标集使用 MatIconRegistry 的 addSvgIconSetaddSvgIconSetInNamespaceaddSvgIconSetLiteral 或 addSvgIconSetLiteralInNamespace 方法进行注册。 当注册了图标集之后,每个内嵌的图标都可以通过它们的 id 属性进行访问。要显示图标集中的某个图标, 只要像单独注册的图标那样使用输入属性 svgIcon 就可以了。

    多个图标集可以注册进同一个命名空间。如果一个图标的 id 出现在多个图标集中,就会使用最近注册的图标集中的图标

     DomSanitizer是用来标记信任路径的(angular默认开启XSS过滤)

    import {MatIconRegistry} from '@angular/material;
    import {DomSanitizer} from "@angular/platform-browser";
    
    export class AppModule {
        constructor(private iconRegistry: MatIconRegistry,private domSanitizer:DomSanitizer){
            iconRegistry.addSvgIconSetInNamespace(namespace名,domSanitizer.bypassSecurityTrustResourceUrl(图标库路径))
        }
    }
    

      使用时

    <mat-icon svgIcon="namespace:iconName"></mat-icon>
    

      

  • 相关阅读:
    最短路
    Codeforces Round #607 (Div. 2) C. Cut and Paste
    第三次训练赛
    训练赛
    day27-反射
    day26-网络编程
    tcp文件上传--多个客户端
    tcp图片上传
    tcp文件上传优化
    tcp文件上传
  • 原文地址:https://www.cnblogs.com/lskzj/p/11419380.html
Copyright © 2011-2022 走看看