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 相关文章推荐
js 效率组装字符串 StringBuffer
Dec 23 Javascript
JavaScript的parseInt 取整使用
May 09 Javascript
jQuery的cookie插件实现保存用户登陆信息
Apr 15 Javascript
js实现按Ctrl+Enter发送效果
Sep 18 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
Sep 15 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
Aug 09 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
Nov 15 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
React props和state属性的具体使用方法
Apr 12 Javascript
基于vue手写tree插件的那点事儿
Aug 20 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
ThinkPHP3.1新特性之多数据库操作更加完善
2014/06/19 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
PHP网页安全认证的实例详解
2017/09/28 PHP
php实现微信公众号企业转账功能
2018/10/01 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
获取数组中最大最小值方法js代码(自写)
2013/08/12 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
极力推荐10个短小实用的JavaScript代码段
2016/08/03 Javascript
nodejs实现解析xml字符串为对象的方法示例
2018/03/14 NodeJs
Layui之table中的radio在切换分页时无法记住选中状态的解决方法
2019/09/02 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python matplotlib画图实例代码分享
2017/12/27 Python
python实现画圆功能
2018/01/25 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python tkinter的grid布局及Text动态显示方法
2018/10/11 Python
解决pycharm remote deployment 配置的问题
2019/06/27 Python
Django 通过JS实现ajax过程详解
2019/07/30 Python
python读取dicom图像示例(SimpleITK和dicom包实现)
2020/01/16 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
英国标准协会商店:BSI Shop
2019/02/25 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
软件设计的目标是什么
2016/12/04 面试题
建筑学推荐信
2013/11/03 职场文书
展会邀请函范文
2014/01/26 职场文书
《藤野先生》教学反思
2014/02/19 职场文书
大学班级文化建设方案
2014/05/06 职场文书
厕所文明标语
2014/06/11 职场文书
规范化管理年活动总结
2014/08/29 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js