如何在 Angular 中包含材质图标库?

2024-03-10

(我参考这个链接问题#2662 https://github.com/angular/angular-cli/issues/2662为此),我添加CSSangular.json and import library instyle.css它给出了如下错误:

./src/styles.css (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./src/styles.css)

在本地项目中以角度安装材质图标库的正确方法是什么?

npm install material-design-icons-iconfont --save

angular.json

"styles": [
  "src/styles.css",
  "../node_modules/material-design-icons/iconfont/material-icons.css",
],

style.css

@import "~material-design-icons-iconfont/dist/material-design-icons";

index.html

<link href="../material-design-icons-iconfont/dist/fonts/" rel="stylesheet">

使用此链接解决了我的问题(https://www.npmjs.com/package/material-icons https://www.npmjs.com/package/material-icons)

npm i material-icons

样式.css

@import '~material-icons/iconfont/material-icons.css';
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 中包含材质图标库? 的相关文章

  • ng2-select 中的数据绑定失败

    我正在尝试使用 ng2 select 将对象数组绑定到下拉列表 当我尝试使用字符串数组时它工作正常 private category Array value 1 text Table value 2 text Chair value 3 t
  • Angular 2循环遍历列表有一些延迟

    如何使用 Angular 2 和 TypeScript 以一定延迟循环遍历数组 我有一个数组 students Array
  • Mat 分页器更改工具提示位置

    我正在尝试定位工具提示mat paginator更靠近分页按钮 目前 工具提示距离太远 如下所示 我尝试更新 cdk overlay pane and mat tooltip panel课程但对我不起作用 任何积分都受到高度赞赏 需要深入组
  • 使用 angular-cli 运行 Protractor 时 SpecReporter 不是构造函数错误

    当我尝试跑步时ng e2e或直接protractor命令我收到此错误 14 39 00 I update chromedriver chromedriver 2 28 up to date 14 39 04 I launcher Runni
  • 注解和装饰器有什么区别?

    我很困惑何时使用术语注释以及何时使用装饰器 Component selector tabs template export class Tabs 装饰器对应于在类上调用的函数 而注释是使用 Reflect Metadata 库在类上设置的
  • 装饰器不支持函数调用

    我在 ng build prod 时遇到问题 装饰器不支持函数调用 但在 initialState 中调用了 Ui export const initialState AppState userAisles null userItems n
  • 错误:类型 typeof Observable 上不存在属性计时器

    代码如下 import Component from angular2 core import Observable from rxjs Rx Component selector my app template Ticks every s
  • Angular 2 Bootstrap 模态

    我正在尝试将 Bootstrap Modal 对话框包装在 Angular 2 组件 指令 虽然运气不太好 我看过https github com shlomiassaf angular2 modal https github com sh
  • 在运行量角器测试时进行 API 调用

    我已经使用构建了一个网络应用程序angular2 0 and typescript 现在我正在写E2E为我的网站使用protractor 现在 在我的一项测试中 我需要进行 API 调用 HTTP GET 请求 并使用响应值作为测试用例中的
  • Angular2 - 根相对导入

    我在 angular2 typescript 中导入时遇到问题 我想使用一些像 app components calendar 这样的根目录的导入 而我能够使用的唯一方法是 app views order order view ts imp
  • 如何在 Angular 4 中获取 HTTP 请求标头?

    在互联网上 我只看到向 HTTP 请求添加参数 如下所示 this headers append Content Type application json this headers append Accept application js
  • 将 Angular 项目从 StackBlitz 导出到本地

    我想导出在 StackBlitz 中完成的 Angular 项目 并使用以下命令从 Angular CLI 执行它ng serve就像我们对在本地计算机中创建的 Angular 项目所做的那样 去做就对了 这是您需要点击的地方
  • Material 2.0.0-beta.3 md-slider不拖动

    希望这是一个愚蠢的问题 我刚刚在为雇主构建的项目中添加了一个 md slider 因此我没有代码来表示抱歉 我将 MdSliderModule 导入到我正在使用的模块中 在我的模板中我想要的位置添加了标签 它出现了 看起来很棒 但不会拖沓
  • 无法分配给对象“#”的只读属性“detachedCallback”

    我安装了A Frame https github com aframevr aframe by npm install aframe save 当我使用时 import aframe or use require aframe import
  • Angular 2交错列表动画

    我正在尝试使用动态列表在我的应用程序中交错播放动画 如果可能的话 我希望动画进入和离开 但我会解决只是为了让进入工作 animations trigger slideIn transition enter style transform t
  • Angular 4:如何使用 HTTPClient 读取文本文件的内容

    我的 Angular 4 项目目录中有一个 txt 文件 我想读取其内容 怎么做 下面是我使用的代码 该文件位于 app 文件夹内的 files 文件夹中 我拥有 HTTPClient 代码的组件位于 app 文件夹内的 httpclien
  • Angular 4在下一行显示p标签的换行符

    我有一个 Angular 4 页面 我必须在其中显示用户评论列表 用户可以多行输入评论 我想在多行中绑定文本 我想显示以 n在新行中 我努力了 p p p comment text p 我不想更换 n with br 标签 我想要别的东西
  • 两个服务如何以双向方式相互通信?

    一种是通过事件 另一种是通过调用方法 我试图在我的应用程序中实现聚合模式 我有 AuthService 在这里我处理身份验证结果并发出事件 if auth this eAuth emit true else this eAuth emit
  • 浮动标签和占位符重叠

    div class form group form default form spacing div
  • Angular 2 路由器使用 Observable 进行解析

    Angular 2 RC 5 发布后引入了路由器解析 Here https angular io docs ts latest guide router html resolve guard使用 Promise 演示了示例 如果我使用 Ob

随机推荐