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实用技巧(一)
Aug 16 Javascript
图片onload事件触发问题解决方法
Jul 31 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
js使用for循环及if语句判断多个一样的name
Sep 09 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 Javascript
解决bootstrap-select 动态加载数据不显示的问题
Aug 10 Javascript
JavaScript面试技巧之数组的一些不low操作
Mar 22 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
May 28 Javascript
iview的table组件自带的过滤器实现
Jul 12 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
Aug 13 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
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
详解php中 === 的使用
2016/10/24 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
2011/09/28 Javascript
JS简单实现文件上传实例代码(无需插件)
2013/11/15 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
javascript实现根据3原色制作颜色选择器的方法
2015/07/17 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
2016/05/25 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
简单实现bootstrap选项卡效果
2017/02/08 Javascript
jQuery操作之效果详解
2017/05/19 jQuery
纯JS实现只能输入数字的简单代码
2017/06/21 Javascript
微信小程序 五星评分的实现实例
2017/08/04 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python群发邮件实例代码
2014/01/03 Python
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
python爬取NUS-WIDE数据库图片
2016/10/05 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
python实现海螺图片的方法示例
2019/05/12 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python爬虫可以爬什么
2020/06/16 Python
无需压缩软件,用python帮你操作压缩包
2020/08/17 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
整理HTML5中表单的常用属性及新属性
2016/02/19 HTML / CSS
Delphi软件工程师试题
2013/01/29 面试题
洗车工岗位职责
2014/03/15 职场文书
一体化教学实施方案
2014/05/10 职场文书
工商管理专业毕业生求职信
2014/05/26 职场文书
高考学习决心书
2015/02/04 职场文书