开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >使用<mat-图标>指令在带有角材料的角6中设置FontAwesome 5

问使用<mat-图标>指令在带有角材料的角6中设置FontAwesome 5
EN

Stack Overflow用户

提问于 2018-08-14 18:06:22

回答 1查看 1.3K关注 0票数 3

基线：

角6.0.3
角材料6.4.2
@fortaw人/角形-火锅："^0.1.1“
@fortawesome/fontawesome core“："^1.2.2”
@fortawesome/free-固态-svg-图标“："^5.2.0” 因此，我已经安装了角字体，我试图让<mat-icon>指令工作，但它没有。我不清楚如何注册字体，或者我是否也需要。我正在寻找一个例子，有人在哪里使用新的字体-可怕的角和什么是需要使用的<mat-icon>指令，以获得图标显示。如果我按照角字体-令人敬畏的GitHub页面上的说明操作，这一切都能工作，但它们使用的标记如下：<fa-icon icon="coffee"></fa-icon>。

请有人通过安装程序，这样我就可以使用<mat-icon>指令来呈现这些内容了。

angular-material-6

EN

回答 1

Stack Overflow用户

发布于 2018-11-15 20:49:31

直接从此链接开始，实现并在我的项目中工作，下面是我遵循的步骤。

安装相关的FontAwesome图书馆npm i@fortawesome/fontawesome svg-核心npm i@fortawesome/free-svg-图标npm i@fortawesome/free-常规-svg-svg i@fortawesome/free-固体svg-图标-图标
从“@角/核心”创建图标serviceimport { Injectable }；从“@角/物质”导入{ MatIconRegistry }；从“@angular/platform-browser”导入{ DomSanitizer }；从“@fortawesome/fontawesome”导入{ IconDefinition }；从“IconService”导出类IconService{_iconRegistry(私有_iconRegistry: MatIconRegistry，私有_sanitizer: DomSanitizer) {} addSvg(图标: IconDefinition) { const = <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${icon.icon[0]} ${icon.icon[1]}"> <path d="${icon.icon[4]}" /> </svg>；this._iconRegistry.getNamedSvgIcon(icon.iconName，icon.prefix).subscribe( () => { //Ok，图标已经存在}，() => {//错误，未找到，添加它为this._iconRegistry.addSvgIconLiteralInNamespace( icon.prefix，icon.iconName，this._sanitizer.bypassSecurityTrustHtml(svg )；} )；}}
添加所需的图标时，应根据需要执行此操作，以防止app.component中的包膨胀/或相关组件需要从“@fortawesome/ faGoogle }”导入图标{faGoogle}；/*.*/构造函数( _iconService: IconService ){ _iconService.addSvg(faGoogle)；//添加图标到库}
使用你的图标

票数 2

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51851999

复制

相关文章

SVG与foreignObject元素

渲染 svg text 后端浏览器

可缩放矢量图形Scalable Vector Graphics - SVG基于XML标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS、DOM、JavaScript等其他网络标准无缝衔接。SVG图像及其相关行为被定义于XML文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑SVG。

WindRunnerMax

2023/08/13

5650

SVG绘图-SVG.js

node.js svg api

官方文档：https://svgjs.dev/docs/3.0/getting-started/

码客说

2021/12/05

6.3K0

一篇文章带你了解SVG <tspan>元素

SVG <tspan>元素用于在SVG中绘制多行文本。不必绝对定位每行文本，该 <tspan>元素使相对于前一行文本放置一行文本成为可能。该 <tspan>元素还使用户可以一次选择并复制粘贴几行文本，而不仅仅是一个text元素。

前端进阶者

2021/01/22

2.2K0

一篇文章带你了解SVG <use> 元素

svg css node.js

SVG <use>元素可以重用SVG文档中其他位置（包括 <g>元素和 <symbol>元素）的SVG形状。可以在 <defs>元素内部（使形状直到使用之前不可见）或外部定义重用形状。

前端进阶者

2021/01/22

3.9K0

一篇文章带你了解SVG <Animation> 动画元素

SVG <Animation> 动画元素用于为SVG图形制作动画。动画元素最初是在同步多媒体集成语言（SMIL）中定义的。在动画中，必须指定属性，运动，颜色，动画的开始时间和动画的持续时间的开始和结束值。

前端进阶者

2021/01/22

3K0

SVG - 创建SVG图片

SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。没有合适的中文文档，自己只能去翻译英文文档（唉，英语不好啊）。今天先来说说SVG的基本知识以及创建SVG的基本方法。 SVG是什么 W3C推荐的网页图形格式，类似于Flash，SVG是一种描述二维矢量图形的标记语言，但它是一种开发的以XML为基础的语言，不是一种私有语言。 SVG的支持程度 IE8-以及Android 2.3默认浏览器

HTML5学堂

2018/03/12

4.2K0

SVG - 基本的SVG属性

SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 line - 直线拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" st

HTML5学堂

2018/03/12

4.1K0

JS 在数组指定位置插入元素

splice 的定义是：从数组中添加/删除项目，返回被删除的项目，并且会改变原数组。

小鑫

2022/04/25

5.6K0

JS向数组添加元素，插入数据

编程算法 https java 网络安全

通过使用push以及unshift即可向数组插入元素，如果要在指定的位置插入元素则可以用splice,splice接收多个参数，分别是索引，要删除的元素个数，新加的元素(可多个，用逗号隔开)；

全栈程序员站长

2022/07/22

10.5K0

在JS数组指定位置插入元素

编程算法 javascript

一、JavaScript splice() 方法 splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

用户7741497

2022/03/06

6.2K0

HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。不过canvas更偏重于动画的制作。所以，绘制矢量图的大任落到了SVG身上。

踏浪

2019/07/31

5.7K0

Python+Selenium 技巧篇-svg标签内元素的xpath定位方式

这种元素比较特殊，需要通过 name 属性来进行定位。写法如下： //*[name()="svg"]//*[name()="image"]

小蓝枣

2020/09/23

2K0

网页中如何使用SVG

编程算法 svg css html

① 如果文件中的根元素带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。 ④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。

奋飛

2021/08/31

2K0

该如何以正确的姿势插入SVG Sprites？

svg css github git 开源

　　大家好，这里是@IT·平头哥联盟，我是首席填坑官——苏南(South·Su)，今天要给大家分享的是 SVGSprites(也叫雪碧图)，所谓雪碧图，当然就不是我们常喝的雪碧饮料（Sprites）哦，哈哈～

苏南

2020/12/16

6620

该如何以正确的姿势插入SVG Sprites？

js实现搜索数组中元素插入的位置

// 搜索插入的位置 // 给定一个排序数组和一个目标值; // 1. 数组中找到目标值，并返回其索引 // 2. 数组中找不到目标值，返回其正确插入的顺序的索引值 function searchInsert(arr, target) { for (let index = 0; index < arr.length; index++) { const element = arr[index]; if (element >= target) {

蓓蕾心晴

2022/06/08

3.6K0

svg中矩形旋转问题

场景：矩形绕原始的中心点旋转后，再调整宽高，这个时候原始点其实已经发生变化，但是旋转角度未变，我们需要计算新的原始点。

JadePeng

2021/08/23

9030

前言图形 SVG <svg id="test_1" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="600" height="400" viewBox="0 0 300 200"> <g style="fill:#d2fae3;stroke:#82eeb5;stroke-width:1"> <rect x="10" y="10" width="100" he

码客说

2021/12/05

2.2K0

SVG字体比IconFont更好用(SVG Sprite)

也许大家都用过字体图标（https://www.iconfont.cn/——，但这次看了这篇文章，感觉直接使用svg更加方便。。。

javascript.shop

2019/09/04

3.2K0

SVG字体比IconFont更好用(SVG Sprite)

svg xml node.js 数据结构

SVG可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言XML，用于描述二维矢量图形的一种图形格式。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式，SVG于2003年成为W3C推荐标准。

WindRunnerMax

2020/08/27

2.4K0

svg scala xml http go

个人认为现在svg可能有点过时了，svg的很多功能css3或者canvas都能做到很好的效果，

用户3055976

2018/09/12

1.6K0

相似问题

并行执行Xcode 10 UI测试时禁用模拟器的连接硬件键盘设置

10

Xcode UI测试错误键盘

22

如何在xcode ui测试中使用Swift代码旋转模拟器

229

Xcode UI测试不会自动启动模拟器

20

Android模拟器硬件键盘[Esc]键

13

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例