跳至主要内容
版本:v8

ion-icon

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="Favorite"></ion-icon>

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

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