Angular Material Icon使用详解


Posted in Javascript onNovember 07, 2018

1. 引入图标资源

在项目index.html文件里添加icon的图标库文件的引用。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="external nofollow" rel="stylesheet">

2. 导入MatIconModule

如果需要在别的组件同样使用,则需要exports里面引出.

3. icons 资源

可以访问material design获取全部icon名称及图标样式信息。

4. 自定义svg图标资源

在网上下载svg资源,并将文件保存到项目assets目录里。

注册图标资源
注册图标资源需要用到:

  1. MatIconRegistry 以及 DomSanitizer 类。
  2. MatIconRegistry(图标资源是基于字体而不是图片的)

使用MatIconRegistry的下面方法addSvgIcon,addSvgIconInNamespace, addSvgIconLiteral 或者addSvgIconLiteralInNamespace 注册.

DomSanitizer 可以把值净化为在不同 DOM 上下文中的安全内容,来帮你防范跨站脚本攻击(XSS)类的安全问题。

abstract class DomSanitizer implements Sanitizer {
 abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
 abstract bypassSecurityTrustHtml(value: string): SafeHtml
 abstract bypassSecurityTrustStyle(value: string): SafeStyle
 abstract bypassSecurityTrustScript(value: string): SafeScript
 abstract bypassSecurityTrustUrl(value: string): SafeUrl
 abstract bypassSecurityTrustResourceUrl(value: string): SafeResourceUrl
}

abstract sanitize(context: SecurityContext, value: SafeValue | string | null): string | null
SecurityContext:枚举

enum SecurityContext {
 NONE: 0
 HTML: 1
 STYLE: 2
 SCRIPT: 3
 URL: 4
 RESOURCE_URL: 5
}

SafeValue :一个标记性接口,用于表示一个值可以安全的用在特定的上下文中。

SafeValue 子接口:

  • SafeHtml
  • SafeResourceUrl
  • SafeScript
  • SafeStyle
  • SafeUrl

如果这个值在这个上下文中是可信的,则该方法会解开所包含的安全值,并且直接使用它;否则,这个值就会根据给定的安全上下文净化成安全的,比如替换那些具有不安全协议(例如 javascript:)的 URL。 该实现负责确保在给定的上下文中可以绝对安全的使用该值。

其余函数警告: 使用不可信的用户数据调用此方法将会让你的应用暴露在 XSS 安全风险之下!

当使用 bypassSecurityTrust... 时,请尽量确保尽早调用该方法,并且让他尽可能接近值的来源,以便能更容易地验证使用它时有没有引入安全风险。

这2个类需要DI进组件。

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

constructor( iconRegistry:MatIconRegistry ,domSanitizer:DomSanitizer ){
 iconRegistry.addSvgIcon('bell',domSanitizer.bypassSecurityTrustResourceUrl('assets/bell.svg'));
}

svg导入需要http支持,因为DomSanitizer 涉及url解析,因此需要导入httpClientModule。

import { HttpClientModule} from '@angular/common/http'

@NgModule({
  imports: [
   HttpClientModule,
  ]
})
export class AppModule { }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 入门基础学习
Mar 10 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
prototype与__proto__区别详细介绍
Jan 09 Javascript
JavaScript实现网页头部进度条刷新
Apr 16 Javascript
基于casperjs和resemble.js实现一个像素对比服务详解
Jan 10 Javascript
详解微信小程序调起键盘性能优化
Jul 24 Javascript
React事件处理的机制及原理
Dec 03 Javascript
Vue CLI3创建项目部署到Tomcat 使用ngrok映射到外网
May 16 Javascript
JS实现普通轮播图特效
Jan 01 Javascript
vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)
Jun 11 Javascript
详解Webpack loader 之 file-loader
Nov 07 #Javascript
JS复杂判断的更优雅写法代码详解
Nov 07 #Javascript
javascript动态创建对象的属性详解
Nov 07 #Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 #Javascript
详解在vue-test-utils中mock全局对象
Nov 07 #Javascript
vue-cli 首屏加载优化问题
Nov 06 #Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 #Javascript
You might like
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
一个不易被发现的PHP后门代码解析
2014/07/05 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
PHP指定截取字符串中的中英文或数字字符的实例分享
2016/03/18 PHP
yum命令安装php7和相关扩展
2016/07/04 PHP
php文件上传类的分享
2017/07/06 PHP
javascript下有关dom以及xml节点访问兼容问题
2007/11/26 Javascript
在次封装easyui-Dialog插件实现代码
2010/11/14 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
JavaScript基础教程之alert弹出提示框实例
2014/10/16 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JS组件Bootstrap导航条使用方法详解
2016/04/29 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
2016/04/29 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
在angular 6中使用 less 的实例代码
2018/05/13 Javascript
解决vue.js 数据渲染成功仍报错的问题
2018/08/25 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
解决django接口无法通过ip进行访问的问题
2020/03/27 Python
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
青年教师典范事迹材料
2014/01/31 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
网页美工求职信
2014/02/15 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
建筑工程造价专业自荐信
2014/07/08 职场文书
2015中学教师个人工作总结
2015/07/22 职场文书