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 Event学习第二章 Event浏览器兼容性
Feb 07 Javascript
Array的push与unshift方法性能比较分析
Mar 05 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
浅谈Javascript如何实现匀速运动
Dec 19 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
详解vue嵌套路由-query传递参数
May 23 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
Feb 22 Javascript
ES6字符串的扩展实例
Dec 21 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
微盾PHP脚本加密专家php解密算法
2020/09/13 PHP
PHP下通过file_get_contents的代理使用方法
2011/02/16 PHP
PHP连接操作access数据库实例
2015/03/30 PHP
php抓取并保存网站图片的实现代码
2015/10/28 PHP
Sample script that deletes a SQL Server database
2007/06/16 Javascript
JavaScript 学习笔记(十三)Dom创建表格
2010/01/21 Javascript
解决jquery的.animate()函数在IE6下的问题
2010/12/03 Javascript
js给selected添加options的方法
2015/05/06 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
JavaScript中对DOM节点的访问、创建、修改、删除
2015/11/16 Javascript
谈一谈jQuery核心架构设计
2016/03/28 Javascript
AngularJS directive返回对象属性详解
2016/03/28 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
基于JS实现仿百度百家主页的轮播图效果
2017/03/06 Javascript
浅谈Vue.js 组件中的v-on绑定自定义事件理解
2017/11/17 Javascript
python生成随机图形验证码详解
2017/11/08 Python
详解Python是如何实现issubclass的
2019/07/24 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
Python实现中值滤波去噪方式
2019/12/18 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
python爬虫容易学吗
2020/06/02 Python
你正在寻找的CSS3 动画技术
2011/07/27 HTML / CSS
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
如何将无状态会话Bean发布为WEB服务,只有无状态会话Bean可以发布为WEB服务?
2015/12/03 面试题
工厂厂长岗位职责
2013/11/08 职场文书
园林毕业生自我鉴定范文
2013/12/29 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
学前班评语大全
2014/05/04 职场文书
药剂专业求职信
2014/06/20 职场文书
单身证明格式样本
2015/06/15 职场文书
2015入党自传格式范文
2015/06/26 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
Python编解码问题及文本文件处理方法详解
2021/06/20 Python