跳到主要内容
版本:v8

图标组件

Icon(图标)是一个通过 Ionicons 库提供的简单组件,默认已预装在所有 Ionic Framework 应用中。它可以用来显示 Ionicons 集合中的任何图标,或者自定义的 SVG 图标。它还支持设置样式,例如尺寸和颜色。

要查看所有可用图标的列表,请访问 ionic.io/ionicons。如需了解更多信息,包括样式设置和自定义 SVG 的使用,请参阅使用指南页面

基本用法

无障碍访问

纯装饰性的图标应设置 aria-hidden="true"。这不会在视觉上隐藏图标,但会将其从辅助技术中隐藏。

<ion-icon name="heart" aria-hidden="true"></ion-icon>

如果图标是可交互的,则应通过添加 aria-label 来定义替代文本。

<ion-icon name="heart" aria-label="收藏"></ion-icon>

或者,如果图标位于另一个描述它的元素内部,则应在该元素上添加 aria-label,并使用 aria-hidden 隐藏图标。

<ion-button aria-label="收藏">
<ion-icon name="heart" aria-hidden="true"></ion-icon>
</ion-button>