Material Symbols官方图标库

944 字
5 分钟
Material Symbols官方图标库
2026-02-28
技术分享
教程
/
VPN
浏览量 加载中...

根据 Material Symbols 官方图标库，我为你整理了适合你导航栏使用的图标及其名称：

📌 公益项目相关图标#

// 公益项目主图标
icon: "material-symbols:favorite"           // 爱心（推荐）
icon: "material-symbols:favorite-outline"   // 爱心（空心）
icon: "material-symbols:volunteer-activism" // 志愿活动（握手+爱心）
icon: "material-symbols:handshake"          // 握手（合作）
icon: "material-symbols:diversity-3"        // 多样性/社群
icon: "material-symbols:charity"            // 慈善
icon: "material-symbols:social-leaderboard" // 社会影响力

🏫 教育相关图标#

icon: "material-symbols:school"              // 学校/教育
icon: "material-symbols:menu-book"           // 书本
icon: "material-symbols:auto-stories"        // 自动故事/阅读
icon: "material-symbols:castle"              // 城堡（学习乐园）
icon: "material-symbols:psychology"          // 心理学/思维
icon: "material-symbols:science"             // 科学
icon: "material-symbols:history-edu"         // 历史教育
icon: "material-symbols:book"                // 书本
icon: "material-symbols:library-books"       // 图书馆
icon: "material-symbols:local-library"       // 本地图书馆

🌿 环保相关图标#

icon: "material-symbols:forest"              // 森林
icon: "material-symbols:park"                // 公园
icon: "material-symbols:tree"                // 树木
icon: "material-symbols:grass"               // 草地
icon: "material-symbols:water-drop"          // 水滴
icon: "material-symbols:recycling"           // 回收利用
icon: "material-symbols:solar-power"         // 太阳能
icon: "material-symbols:eco"                 // 生态
icon: "material-symbols:earthquake"          // 地球（环保）
icon: "material-symbols:climate-mini"        // 气候
icon: "material-symbols:clean-hands"         // 清洁双手/环保

🐾 动物相关图标#

icon: "material-symbols:pets"                // 宠物/动物
icon: "material-symbols:paw"                 // 爪子
icon: "material-symbols:dog"                 // 狗
icon: "material-symbols:cat"                 // 猫
icon: "material-symbols:wild-animal"         // 野生动物
icon: "material-symbols:bird"                // 鸟
icon: "material-symbols:raven"               // 乌鸦/鸟类
icon: "material-symbols:butterfly"           // 蝴蝶
icon: "material-symbols:fish"                // 鱼
icon: "material-symbols:marine-life"         // 海洋生物
icon: "material-symbols:koala"               // 考拉
icon: "material-symbols:hamster"             // 仓鼠

💝 捐赠/赞助相关图标#

icon: "material-symbols:volunteer-activism"  // 志愿活动
icon: "material-symbols:handshake"           // 握手
icon: "material-symbols:paypal"              // PayPal
icon: "material-symbols:credit-card"         // 信用卡
icon: "material-symbols:qr-code"             // 二维码
icon: "material-symbols:receipt"             // 收据
icon: "material-symbols:donation"            // 捐赠
icon: "material-symbols:heart-plus"          // 爱心+
icon: "material-symbols:favorite"            // 爱心
icon: "material-symbols:redeem"              // 兑换/礼品

👤 个人相关图标#

icon: "material-symbols:person"              // 个人
icon: "material-symbols:account-circle"      // 账户圆形
icon: "material-symbols:badge"               // 徽章
icon: "material-symbols:id-card"             // 身份证
icon: "material-symbols:settings"            // 设置
icon: "material-symbols:manage-accounts"     // 管理账户

📷 相册/画廊相关图标#

icon: "material-symbols:photo-library"       // 照片库
icon: "material-symbols:collections"         // 收藏集
icon: "material-symbols:wallpaper"           // 壁纸
icon: "material-symbols:camera"              // 相机
icon: "material-symbols:image"               // 图片
icon: "material-symbols:album"               // 相册

🎬 番组/Bangumi相关图标#

icon: "material-symbols:tv"                  // 电视
icon: "material-symbols:movie"               // 电影
icon: "material-symbols:live-tv"             // 直播电视
icon: "material-symbols:play-circle"         // 播放圆形
icon: "material-symbols:video-library"       // 视频库
icon: "material-symbols:subscriptions"       // 订阅
icon: "material-symbols:theaters"            // 剧院
icon: "material-symbols:smart-display"       // 智能显示

🔗 链接相关图标#

icon: "material-symbols:link"                // 链接
icon: "material-symbols:open-in-new"         // 新窗口打开
icon: "material-symbols:share"               // 分享
icon: "material-symbols:ios-share"           // iOS分享
icon: "material-symbols:add-link"            // 添加链接

🏠 主页相关图标#

icon: "material-symbols:home"                // 主页
icon: "material-symbols:house"               // 房子
icon: "material-symbols:cottage"             // 小屋
icon: "material-symbols:other-houses"        // 其他房子

📦 归档相关图标#

icon: "material-symbols:archive"             // 归档
icon: "material-symbols:inbox"               // 收件箱
icon: "material-symbols:folder"              // 文件夹
icon: "material-symbols:folder-open"         // 打开文件夹
icon: "material-symbols:database"            // 数据库

👥 友链相关图标#

icon: "material-symbols:people"              // 人们
icon: "material-symbols:group"               // 群组
icon: "material-symbols:communities"         // 社区
icon: "material-symbols:diversity-1"         // 多样性
icon: "material-symbols:handshake"           // 握手
icon: "material-symbols:link"                // 链接

💬 留言板相关图标#

icon: "material-symbols:chat"                // 聊天
icon: "material-symbols:comment"             // 评论
icon: "material-symbols:forum"               // 论坛
icon: "material-symbols:message"             // 消息
icon: "material-symbols:feedback"            // 反馈
icon: "material-symbols:question-answer"     // 问答

📝 关于/内容相关图标#

icon: "material-symbols:info"                // 信息
icon: "material-symbols:about"               // 关于
icon: "material-symbols:help"                // 帮助
icon: "material-symbols:description"         // 描述
icon: "material-symbols:article"             // 文章
icon: "material-symbols:fact-check"          // 事实核查

🎨 使用示例#

// 在你的 navBarConfig.ts 中
links.push({
    name: "公益项目",
    icon: "material-symbols:volunteer-activism",  // 志愿活动图标
    children: [
        {
            name: "乡村教育支持",
            url: "/welfare/rural-education/",
            icon: "material-symbols:school",       // 学校图标
        },
        {
            name: "环境保护计划",
            url: "/welfare/environment/",
            icon: "material-symbols:forest",       // 森林图标
        },
        {
            name: "动物救助行动",
            url: "/welfare/animal-rescue/",
            icon: "material-symbols:pets",         // 宠物图标
        },
        {
            name: "捐赠渠道",
            url: "https://hangdn.com",
            external: true,
            icon: "material-symbols:favorite",     // 爱心图标
        },
    ],
});

💡 提示#

  1. 图标风格变体：Material Symbols 支持三种风格

    • material-symbols:图标名 - 默认样式
    • material-symbols-rounded:图标名 - 圆角样式
    • material-symbols-sharp:图标名 - 锐利样式

  2. 填充效果：部分图标支持填充变体

    • material-symbols:favorite（实心爱心）
    • material-symbols:favorite-outline（空心爱心）

  3. 图标数量：Material Symbols 库包含 3,800+ 个图标，涵盖几乎所有场景

你可以访问 Material Symbols 官方目录 浏览和搜索更多图标。

支持与分享

如果这篇文章对你有帮助，欢迎分享给更多人或赞助支持！

赞助
Material Symbols官方图标库
https://fly.hangdn.com/posts/material-symbols官方图标库/
作者
Hangdn notes
发布于
2026-02-28
许可协议
CC BY-NC-SA 4.0
Firefly 主题在导航栏添加新菜单和页面的完整流程
如何看股票的股性，具体是指以下几个方面
相关文章 智能推荐
1
Firefly 主题在导航栏添加新菜单和页面的完整流程
技术分享 Firefly 主题在导航栏添加新菜单和页面的完整流程,修改配置文件，增加MD文件路由
2
部署Twikoo到cloudflaer
技术分享 部署Twikoo,复制仓库,创建D1数据库,创建R2存储
3
科学上网永久免费Firefox 火狐浏览器免费VPN纯净IP无限流量
技术分享 通达信看盘，在线看盘工具汇总，连板天梯，打板
4
科学上网的最高境界将白嫖进行到底无需VPS无需域名
技术分享 通达信看盘，在线看盘工具汇总，连板天梯，打板
5
科学上网永久免费 VPN2026最强精选真正永久免费vpn
技术分享 通达信看盘，在线看盘工具汇总，连板天梯，打板
随机文章 随机推荐

评论区

分享你的想法，与大家交流讨论

Profile Image of the Author
Hangdn notes
Hello, I'm hangdn.
欢迎你，朋友
🌐 网络冲浪技术分享，📈 股票交易文章，⚡ 科学上网，💪励志语录，📜 史氏宗谱文章，🏞️ 各地风景，没有固定的更新频率，但有我真诚的分享，欢迎你常来坐坐，留言交流。
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
分类
标签
更多
站点统计
文章
57
分类
12
标签
35
总字数
204,312
运行时长
0 天
最后活动
0 天前
装饰图
Astro TailwindCSS Twikoo Algolia EdgeOne Umami 51.LA Copyright
本网站由 51.LA 51.LA | Umami Umami | Google Analytics Google Analytics 提供数据统计服务
(●'◡'●) 未来可期，不负韶华。
© 2026 Hangdn notes. All Rights Reserved. / RSS / Sitemap
Powered by Astro & Firefly

文章目录