跳到主要内容
版本: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>