vue+Material 中Material的字体图标使用教程

最新推荐文章于 2025-06-04 09:09:48 发布
原创 最新推荐文章于 2025-06-04 09:09:48 发布 · 4.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #Material #Material icons

本文档将指导你如何在Vue项目中成功引入并使用Material Icons。在遇到npm配置包缺失及官方文档未解决问题后，通过在index.html中添加外部资源链接或在样式表中插入代码的方式，实现了图标引入。教程包括两个步骤：第一步是在HTML中添加链接或在CSS中插入代码；第二步介绍了Material Icons的两种调用方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue+Material 中Material的字体图标使用教程

问题

我找了很久没有找到npm配置的包，官方提供的文档安装之后也没什么用
在这里插入图片描述
还是我才疏学浅，不会用吧，下载下来之后继续引入还是没有效果，在查阅了文档之后，终于实现了，下面就直接上教程吧

第一步：

在你的index.html上加入这个外部包（这个方法确实不好，但是我也着实是没有找到其他的方法了）
在这里插入图片描述

	<link rel="stylesheet" href="//fonts.lug.ustc.edu.cn/icon?family=Material+Icons">

或者在你的重置样式表中加入这段代码（其实就是这个外部链接的代码）

//Material字体图标
@font-face
最低0.47元/天 解锁文章

200万优质内容无限畅学
Cesium 5 ，Cesium 点击添加路线，实现绘制路线和图标交互，使用 Vue + Cesium 实现绘制路线功能完整指南（Vue + Cesium 绘制路线）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
11-20 2063
⭐在地理信息系统（GIS）和三维地图应用中，使用 Cesium 开发 3D 地图应用时，常见的需求是动态绘制路线并与图标进行交互，通过单击绘制路径、双击结束绘制，以及显示保存图标，点击保存坐标数据。这里分享记录，基于 Vue+Cesium ，详细解析如何实现这些功能。
利用vue+babylon渲染三维模型在前端页面中展示
jnfy的博客
09-02 1348
利用vue+babylon渲染三维模型在前端页面中展示
vue-material-icons
04-02
物质图标 Vue2材质设计图标，可轻松访问图标名称和类型。 如何通过npm安装 npm install -D @dbetka/material-icons 设置 添加为Vue插件 import MaterialIcons from '@dbetka/material-icons' ; Vue . use ( MaterialIcons ) ; 自己添加组件 import { AIcon , IconComputed , IconFonts } from '@dbetka/material-icons' ; Vue . use ( IconFonts ) Vue . use ( IconComputed ) Vue . component ( AIcon . name , AIcon ) ; // component name is `a-icon` 设置自己的组件名称 import {
vue-material-design-icons：材料设计图标作为Vue单个文件组件
02-04
Vue材质设计图标组件 该库是Vue单文件组件的集合，用于呈现Material Design图标，该组件来自。 它还包括一些CSS，可帮助简化图标的缩放。 入门 安装套件 yarn add vue-material-design-icons 要么 npm i vue-material-design-icons 导入图标，并将其声明为本地组件： import MenuIcon from 'vue-material-design-icons/Menu.vue' ; components: { MenuIcon ; } 要么 将其声明为全局组件： import MenuIcon fro
Vue Material 入门指南：从安装到基础使用
最新发布
gitblog_00024的博客
06-04 274
Vue Material 入门指南：从安装到基础使用 前言 Vue Material 是一个优秀的 Vue.js 与 Material Design 规范的集成方案。它为开发者提供了一套美观、响应式的 UI 组件，同时保持了 Vue.js 的灵活性和易用性。本文将详细介绍如何开始使用 Vue Material，包括安装、配置和基础使用方法。 环境准备 在开始使用 Vue Material 之前，请...
Vue Material Design Icons 使用指南
gitblog_01045的博客
08-23 668
Vue Material Design Icons 使用指南 项目介绍 Vue Material Design Icons 是一个专为 Vue.js 应用设计的图标库，它集成了 Google 的 Material Design 图标集合。这个开源项目使得在 Vue 应用中轻松地添加和管理高质量的 Material Design 图标变得简单。通过这个库，开发者可以方便地利用 Material De...
MaterialDesignIcons-Vue:材质设计图标Vue组件
05-09
MaterialDesign-Vue 在Vue组件中轻松使用MaterialDesignIcons。 安装 NPM 要求此程序包进入您的项目： yarn add materialdesign-vue --save-dev # or, using npm npm install materialdesign-vue --save-dev 其他 将vue-mdi.min.js文件包含到您的项目中，将其导入并注册Mdi组件： < script src =" https://github.com/chteuchteu/MaterialDesignIcons-Vue/blob/master/dist/vue-mdi.min.js " > </ script > Vue . use ( Mdi ) ; 用法 < template> < mdi :mdi =" mdi
【自学Flutter】4.1 Material Design字体图标的使用(icon)
技术宅-Nopi的博客
06-24 1149
4.1 Material Design字体图标的使用(icon) 1.源代码 import 'package:flutter/material.dart'; void main () => runApp(MyApp()); class MyApp extends StatelessWidget{ @override Widget build(BuildContext contex...
Vue 第三方字体图标引入 Font Awesome的方法
12-10
**在Vue组件中使用Font Awesome图标** 引入样式后，你可以在Vue组件中直接使用Font Awesome的类名来显示图标。Font Awesome的图标类通常由两部分组成：`fa`基础类和具体的图标类。例如，如果你想显示"camera-retro...
Vue3实战笔记（02）--- 使用VUETIFY图标字体
山花的博客
05-05 1272
Vuetify 开箱即支持 4 种流行的图标字体库—— Material Design Icons，Material Icons，Font Awesome 4 和 Font Awesome 5。今天为项目安装喜欢的图标。
Vue Material Design Icons 使用与安装指南
gitblog_00722的博客
08-24 566
Vue Material Design Icons 使用与安装指南 1. 项目目录结构及介绍 本部分将详细解析Vue Material Design Icons项目的文件夹架构，帮助您快速理解其组织方式。 vue-material-design-icons/ ├── src # 源代码目录 │ ├── components ...
包含1000多个material矢量图标的安卓图标库.zip
09-25
包含1000多个material矢量图标的安卓图标库.zip,包含2000多个材质矢量图标的库，可以轻松用作可绘制视图或独立视图。
推荐开源项目：Vue Material Design Icon Components
gitblog_00020的博客
06-10 406
推荐开源项目：Vue Material Design Icon Components 项目介绍 Vue Material Design Icon Components 是一个强大的Vue.js库，提供了一系列基于单文件组件（SFC）的Material Design图标。这些图标源于Templarian/MaterialDesign项目，让您的Vue应用能够轻松地集成美观且一致的UI元素。 项目技术...
使用google Material 图标
遨游在太空
02-15 1689
如何在网页中添加Google material 图标
Material-UI FontIcon组件使用
Keep It Simple, Stupid
06-02 3338
material-ui是一款优秀的react组件库，目前在github上Star数已经达到了25759个。其中FontIcon组件包含了900多个系统图标，但是在使用的过程中你会发现图标显示不出来，解决方法如下： 到这个地址https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY
如何在前端项目中使用icon图标 （iconfont和remixicon以及Materialicon）
haodanzj的博客
06-20 3111
使用图标库的教程
Material + Icon的使用方法
qq_34045989的博客
04-06 4310
文章来源: https://www.1117.work/article/104/article_detail/ 1. 下载Icon+css文件http://fonts.googleapis.com/icon?family=Material+Icons 或者自定义demo.css文件 写入如下内容： @font-face { font-family: 'Material Icons'; ...
【Vuejs】1385- Vue3 中这样使用 Icon 更优雅
油墨香^-^的博客
07-19 3000
这可能是目前最便捷、最合适的Icon使用方式了，特别是在Vue3中，等等，你以为它只是适用于Vue3？不，不要被标题欺骗，它支持等多种主流框架，同样，它也支持等多种主流构建工具。之所以标题中带有Vue3以及单纯是因为此文是以此背景下产生的，示例代码也是基于此。前端自习课每日清晨，享受一篇前端优秀文章。136篇原创内容公众号假如你并不是此环境也无碍，你依然可以看完此文，因为不同环境只是在配置上稍微有些不同，使用上是完全一致的，当然，最终是否使用取决于你自己的取舍！IconFontIcon去解析。......
material-ui_体验Material-UI
weixin_26746861的博客
07-18 1091
material-uiI have heard many great things about Material-UI the popular React.js framework. As stated in their about page: 我听说过Material-UI的流行React.js框架有很多很棒的东西。 如其关于页面所述 ： Material-UI started back in...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值