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 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
用jquery实现点击栏目背景色改变
Dec 10 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
jquery判断密码强度的验证代码
Apr 22 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
Angular2环境搭建具体操作步骤(推荐)
Aug 04 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 Javascript
在vue组件中使用axios的方法
Mar 16 Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 Javascript
JS中判断字符串存在和非空的方法
Sep 12 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
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
杏林同学录(八)
2006/10/09 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
php判断两个日期之间相差多少个月份的方法
2015/06/18 PHP
php使用Swoole实现毫秒级定时任务的方法
2020/09/04 PHP
JavaScript 无符号右移赋值操作
2009/04/17 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍
2016/09/01 Javascript
Vue响应式原理深入解析及注意事项
2017/12/11 Javascript
vue页面加载时的进度条功能(实例代码)
2020/01/13 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python OpenCV处理图像之图像直方图和反向投影
2018/07/10 Python
python实现随机漫步算法
2018/08/27 Python
python实现录音小程序
2020/10/26 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
TensorFlow基于MNIST数据集实现车牌识别(初步演示版)
2019/08/05 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
python的slice notation的特殊用法详解
2019/12/27 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
详解Python openpyxl库的基本应用
2021/02/26 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
事业单位公务员的职业生涯规划
2014/01/15 职场文书
蛋糕店的商业计划书范文
2014/01/27 职场文书
总经理助理的职责
2014/03/14 职场文书
党员干部承诺书
2014/03/25 职场文书
党员承诺书怎么写
2014/05/20 职场文书
阅兵口号
2014/06/19 职场文书
学生检讨书怎么写
2014/10/09 职场文书
2015大学生实训报告
2014/11/05 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书
Django REST framework 限流功能的使用
2021/06/24 Python
Apache SeaTunnel实现 非CDC数据抽取
2022/05/20 Servers