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 中对象的继承〔转贴〕
Jan 22 Javascript
js数组与字符串的相互转换方法
Jul 09 Javascript
node.js中的url.resolve方法使用说明
Dec 10 Javascript
Jquery实现图片预加载与延时加载的方法
Dec 22 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
Dec 04 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
Apr 26 Javascript
基于Angularjs实现分页功能
May 30 Javascript
layui选项卡效果实现代码
May 19 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
前端防止用户重复提交js实现代码示例
Sep 07 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 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
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
PHP入门速成教程
2007/03/19 PHP
PHP使用gmdate实现将一个UNIX 时间格式化成GMT文本的方法
2015/03/19 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP htmlentities()函数用法讲解
2019/02/25 PHP
JavaScript获取当前网页最后修改时间的方法
2015/04/03 Javascript
详解Nodejs之静态资源处理
2017/06/05 NodeJs
JS中跳出循环的示例代码
2017/09/14 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
python实现感知器算法(批处理)
2019/01/18 Python
基于python生成器封装的协程类
2019/03/20 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python实现低通滤波器代码
2020/02/26 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
施华洛世奇意大利官网:SWAROVSKI意大利
2018/07/23 全球购物
美国购物网站:Clickhere2shop
2021/01/28 全球购物
C#笔试题集合
2013/06/21 面试题
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
参观考察邀请函范文
2014/01/29 职场文书
酒店大堂副理的职责范文
2014/02/13 职场文书
理工学院学生自我鉴定
2014/02/23 职场文书
黄金酒广告词
2014/03/21 职场文书
淘宝好评语大全
2014/05/05 职场文书
应届毕业生自荐信
2015/03/04 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
2019年入党思想汇报
2019/03/25 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书
React-vscode使用jsx语法的问题及解决方法
2021/06/21 Javascript
Redis 哨兵机制及配置实现
2022/03/25 Redis
Netflix《海贼王》真人版剧集多张片场照曝光
2022/04/04 日漫