首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在angular material 2中使用社交图标

在Angular Material 2中使用社交图标,可以通过以下步骤完成:

  1. 首先,确保你已经安装了Angular Material和Angular CDK。可以通过以下命令来安装它们:
代码语言:txt
复制

npm install --save @angular/material @angular/cdk

代码语言:txt
复制
  1. 接下来,你需要在你的Angular项目中引入所需的图标。Angular Material提供了一套内置的图标集,你可以在官方文档中找到完整的图标列表。你可以通过以下命令来安装图标集:
代码语言:txt
复制

npm install --save @angular/material-icons

代码语言:txt
复制
  1. 在你的Angular项目的根模块中,导入MatIconModuleMatIconRegistry
代码语言:typescript
复制

import { MatIconModule, MatIconRegistry } from '@angular/material';

@NgModule({

代码语言:txt
复制
 imports: [
代码语言:txt
复制
   MatIconModule
代码语言:txt
复制
 ],
代码语言:txt
复制
 providers: [
代码语言:txt
复制
   MatIconRegistry
代码语言:txt
复制
 ]

})

export class AppModule {

代码语言:txt
复制
 constructor(private matIconRegistry: MatIconRegistry) {
代码语言:txt
复制
   // 注册所需的图标集
代码语言:txt
复制
   matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
代码语言:txt
复制
 }

}

代码语言:txt
复制
  1. 在你的组件模板中,使用<mat-icon>元素来显示图标。你可以通过设置svgIcon属性来指定要显示的图标名称。例如,要显示一个名为"facebook"的社交图标,可以这样写:
代码语言:html
复制

<mat-icon svgIcon="facebook"></mat-icon>

代码语言:txt
复制

注意:图标名称是不区分大小写的。

以上就是在Angular Material 2中使用社交图标的基本步骤。你可以根据需要自由选择要显示的图标,并根据Angular Material的其他组件和功能来构建丰富的用户界面。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。

  • 腾讯云云服务器(CVM):提供高性能、可扩展的云服务器,适用于各种应用场景。了解更多信息,请访问腾讯云云服务器
  • 腾讯云对象存储(COS):提供安全、可靠的对象存储服务,适用于存储和管理各种类型的数据。了解更多信息,请访问腾讯云对象存储
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Angular Elements 组件angular 页面中使用的DEMO

    如果页面引入该Js文件 ,就相当于页面中新增了一个标签,所以在任意框架中都可以使用新标签,就像它是原生div一样。        ...二、Angular Elements 使用实战      前不久看到项目angular-elements-dashboard :支持动态加载模块和动态加载外部的模块。...于是我就尝试一下,看这个构建的angular elements 文件到底如果引入一个空白的页面中,引入后的组件浏览器中又是如何呈现的。      页面结构:      ?...总结一下,通过使用两个种方式操作自定义元素和以前学习的内置元素的概念一模一样。 ...它的目的是为了不改变Native的模式情况下,引入最新的Shadow Dom v1技术 ,而Native已经过时,不鼓励使用

    2.7K20

    Angular4记账webApp练手项目之二(angular4项目中使用Angular WeUI)

    写在前面 angular4项目中 例子是基于之前文章:利用angular-cli构建Angular4.X项目 可以参考官网:https://cipchk.github.io/ngx-weui/...1、如何使用第三方库,安装-引用(主要参考官方文档) 2、{{}}指令,单向绑定数据,声明数据-绑定数据 3、[(ngModel)]指令,双向绑定数据,声明数据-绑定数据 4、*ngFor指令,循环渲染...更多angular指令及用法参看官网。...安装及引用 安装 npm install angular-weui --save 安装后还需要引用weui 样式以及我们的font-awesome图标苦,我们项目index.html中引用 <!...我选择固定中间按钮,使用动态绑定样式让中间部分的高度等于页面高度-底部和顶部的高度,设置overflo为scroll; accounting.component.ts中添加样式数据如下: contentStyle

    2.2K20

    分享下 Backbone、Vue、Angular、React 项目上的使用经验

    于是,我想分享一下之前使用这些 MV* 框架的经验。 前端的摩尔时代 同样吧,在上周结束了《Expert Angular》的审校,这是第三本为 Packt 出版社审校的 Angular 的书。...而除了每一层 View 的关系外,还有全局中会对一些 DOM 进行处理。 当你某一层级修改了DOM 的时候,我只能祝你好运了。 而在新的 MV* 框架里,则可以使用模块化来解决问题。...除了直接使用 Node.js 渲染,我们还测试过的一种方案是,直接生成对应静态的页面。其数据量大概一百万左右,一次生成这么多的数据是一种极大的挑战。...新的项目里,采用的是 Angular。 场景三:Angular 实现桌面端与移动应用代码复用 ?...为什么 Angular 选型里失去优势? Angular 1.x 到 Angular 2.x 这段期间里,有大量的技术人员因为奥斯本效应而选择了其他框架。

    2.2K60

    介绍几个移动web app开发框架

    除了全新的默认主题和SVG图标,还新增了开关控件、通用过滤器、箭头弹出框、滑动提示框等一系列功能,更是集成了jQuery UI的Tab部件。...Bootstrap 主题 https://github.com/commadelimited/jQuery-Mobile-Bootstrap-Theme Frozen UI Frozen UI是腾讯ISUX团队(社交用户体验设计团队...视图控制模式中,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏一系列可视化面板间切换。 github。...它主要专注 iOS 和 Google Material design 以带来最好的用户体验并保持简单。

    6K20

    Angular4记账webApp练手项目之三(angular4项目中使用路由router)

    用到了哪些 1、路由,子路由的使用,引入——定义Routes——router-outlet——routerLink——routerLinkActive 2、(click)指令,绑定事件 3、[ngClass...]指令,绑定样式 安装 npm i --save @angular/router 官方网址:https://angular.io/guide/router 引入和使用使用路由,我们需要在 app.module.ts...具体如下: import { RouterModule } from '@angular/router'; imports: [ BrowserModule, FormsModule...RouterModule, WeUIModule ], 这样还不行,还要定义和添加路由,修改如下: import { Routes, RouterModule } from '@angular...这里写图片描述 二级路由(子路由使用) 我们当初设计统计有两个页面,按年统计,和按月统计。现在来完成这个。

    1.4K30

    18 个漂亮的 Bootstrap 模板

    React, Angular, Vue and Bootstrap templates 创建 Web 应用程序的最佳方法是使用模板。...使用 Bootstrap Material Design 框架构建。 惊人而流畅的动画。 很棒的通知和报警系统。 15 个内置插件,大量示例页面,5 组不同的图标。 最后更新大约在两周前。...使用的技术是 React Router、Redux、Material UI 和 SASS。 支持电子商务、加密、预订和移动应用的特殊仪表板。 使用 React Hot Loader 重新加载组件。...使用的技术是Angular 8、Sass、HTML5、Firebase。 精心设计的时尚元素。 80 多种集成页面和 12 种集成语言。 随附所有必需的组件:图标、按钮、表单、表格图表。...基于 Angular 9。 有 6 种不同布局和 10 种颜色样式的直观设计。 ThemeForest 上的评级为 4.97 星。 包含响应式表格、图表、日历,邮箱等应用程序。

    14.5K11

    提升幸福度的 VSCode 插件推荐(2022版)

    目录 一、主题及图标 二、功能强化 三、Git 集成 四、数据库 五、编程美化 六、开发效率 七、前端开发 八、数据分析 九、修仙插件 1主题及图标 GitHub Theme 黑白两款皮肤 Material...Theme 集成了多种主题皮肤,搭配 Material Icon Theme 食用更佳 Material Icon Theme 扁平化的主题图标库 vscode-icons VSCode官方出品的图标库...代码截图 Chinese (Simplified) Language Pack for Visual Studio Code 中文语言包 3Git 集成插件 GitHub Pull requests Visual...其他样式(XML,Vue,Angular,PHP)也可以使用,但不能保证正常使用。...状态栏中显示标记的路径 Markdown Preview Enhanced VSCode 里编写 Markdown,支持预览 Image Preview 预览图片 6开发效率 EditorConfig

    5.6K30
    领券