Ionic 图标（Ion-icon）2025 年最新最全中文讲解
（已内置 2000+ 个精美图标，全部矢量、支持自动切换深色模式）
1. 最快上手（3 秒就会）
<!-- 直接写名字就行 -->
<ion-icon name="heart"></ion-icon> <!-- 实心 ❤️ -->
<ion-icon name="heart-outline"></ion-icon> <!-- 空心 ♡ -->
<ion-icon name="home"></ion-icon>
<ion-icon name="search"></ion-icon>
<ion-icon name="person"></ion-icon>
<ion-icon name="cart"></ion-icon>
<ion-icon name="close-circle"></ion-icon>2. 2025 年 Ionic 官方推荐的 4 大图标库（任选其一，全免费）
| 图标库 | 特点 | 引入方式（选一个就行） | 常用前缀 |
|---|---|---|---|
| Ionicons（默认） | 2000+ 个，Ionic 官方出品，最匹配 | 自动内置，无需引入！（Ionic 项目默认已包含） | 无需前缀 |
| Material Design | Google 官方，极简风 | <ion-icon src="https://unpkg.com/ionicons@7.4.0/dist/collection/icon/svg/logo-google.svg"></ion-icon> | md- |
| iOS 风格 | 苹果风，圆润 | 自动支持 | ios- |
| Font Awesome | 数量最多（8000+） | 额外引入（不推荐，体积大） | fa- |
99% 的项目只用默认 Ionicons 就够了！
3. 超实用的 60 法（推荐收藏）
<!-- 大小 -->
<ion-icon name="home" size="small"></ion-icon> <!-- 小 -->
<ion-icon name="home" size="large"></ion-icon> <!-- 大 -->
<!-- 自定义大小（最常用！） -->
<ion-icon name="camera" style="font-size: 32px;"></ion-icon>
<ion-icon name="camera" style="font-size: 48px; color: #3880ff;"></ion-icon>
<!-- 颜色 -->
<ion-icon name="star" color="warning"></ion-icon> <!-- 金色星星 -->
<ion-icon name="heart" color="danger"></ion-icon> <!-- 红心 -->
<ion-icon name="thumbs-up" color="success"></ion-icon> <!-- 绿色点赞 -->
<!-- 选中/未选中状态自动切换（tab栏必备） -->
<ion-tab-button tab="home">
<ion-icon name="home-outline"></ion-icon> <!-- 未选中 -->
<ion-icon name="home"></ion-icon> <!-- 选中（Ionic 自动切换） -->
<ion-label>首页</ion-label>
</ion-tab-button>4. 2025 年最火的 50 个必备图标名字（直接复制）
add-circle heart star search
remove-circle heart-outline star-outline close
checkmark-circle home home-outline menu
close-circle person person-outline cart
arrow-forward arrow-back camera mic
share-social chatbubble chatbubble-outline notifications
settings bookmark bookmark-outline download
trash refresh location call
mail mail-outline send time
star-half heart-half flame trending-up
flash flash-off wifi bluetooth
qr-code gift medal trophy
eye eye-off lock-closed lock-open
chevron-forward chevron-back chevron-down chevron-up
ellipsis-vertical ellipsis-horizontal reorder-three-outline add5. 动态加载外部 SVG（自定义图标终极方案）
<!-- 比如你有自己的 logo.svg -->
<ion-icon src="/assets/icons/my-logo.svg" size="large"></ion-icon>
<!-- 或者从网络加载 -->
<ion-icon src="https://unpkg.com/ionicons@7.4.0/dist/svg/logo-vue.svg"></ion-icon>6. 完整 Tab 栏图标最佳实践（2025 最新写法）
<ion-tab-bar slot="bottom">
<ion-tab-button tab="home" href="/tabs/home">
<ion-icon name="home-outline"></ion-icon>
<ion-icon name="home"></ion-icon>
<ion-label>首页</ion-label>
</ion-tab-button>
<ion-tab-button tab="category">
<ion-icon name="grid-outline"></ion-icon>
<ion-icon name="grid"></ion-icon>
<ion-label>分类</ion-label>
</ion-tab-button>
<ion-tab-button tab="cart">
<ion-icon name="cart-outline"></ion-icon>
<ion-icon name="cart"></ion-icon>
<ion-label>购物车</ion-label>
<ion-badge color="danger">99+</ion-badge>
</ion-tab-button>
<ion-tab-button tab="mine">
<ion-icon name="person-outline"></ion-icon>
<ion-icon name="person"></ion-icon>
<ion-label>我的</ion-label>
</ion-tab-button>
</ion-tab-bar>7. 在线图标查询（超级好用）
官方图标大全（带搜索）：
https://ionic.io/ionicons
搜索关键词直接复制名字使用，比如搜“微信” → 能搜到 logo-wechat
总结一句话
Ionic 项目里永远只写 <ion-icon name="xxx"></ion-icon> 就够了！
2000+ 图标随便用，自动深色模式，体积才 80KB！
需要我立刻发你一份「2025 年最新 Ionic 8 完整图标包 + 商城常用 200 个图标模板」吗？
直接回复「发我图标包」我就打包发你（含分类、按场景整理好）！
