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 jsFiddle JSBin在线调试器
Mar 14 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
Jan 27 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
Bootstrap弹出框之自定义悬停框标题、内容和样式示例代码
Jul 11 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
详解Vue3中对VDOM的改进
Apr 23 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 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
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
php socket通信简单实现
2016/11/18 PHP
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
jQuery中index()的用法分析
2014/09/05 Javascript
jquery果冻抖动效果实现方法
2015/01/15 Javascript
jQuery采用连缀写法实现的折叠菜单效果
2015/09/18 Javascript
纯javascript实现自动发送邮件
2015/10/21 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
2016/09/09 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue单个组件实现无限层级多选菜单功能
2018/04/10 Javascript
微信小程序实现红包功能(后端PHP实现逻辑)
2018/07/11 Javascript
vue router 传参获取不到的解决方式
2019/11/13 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
[06:21]2014DOTA2国际邀请赛 庆祝VG首阶段领跑;B叔为挣牛排半夜整理情报
2014/07/13 DOTA
python中lambda与def用法对比实例分析
2015/04/30 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
8种常用的Python工具
2020/08/05 Python
vscode配置anaconda3的方法步骤
2020/08/08 Python
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
奥地利婴儿用品和玩具购物网站:baby-markt.at
2020/01/26 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
2014年征兵标语
2014/06/20 职场文书
小学生植树节活动总结
2014/07/04 职场文书
幼儿教师师德师风自我剖析材料
2014/09/29 职场文书
物业工程部岗位职责
2015/02/11 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
2016年安康杯竞赛活动总结
2016/04/05 职场文书
Win10鼠标宏怎么设置?win10系统鼠标宏的设置方法
2022/08/14 数码科技