Skip to main content

ion-icon

Icon 是一个通过 Ionic 图标 库提供的简单组件，默认情况下与所有 Ionic Framework 应用一起预打包。它可用于显示 Ionicons 集中的任何图标或自定义 SVG。它还支持尺寸和颜色等样式。

¥Icon is a simple component made available through the Ionicons library, which comes pre-packaged by default with all Ionic Framework applications. It can be used to display any icon from the Ionicons set, or a custom SVG. It also has support for styling such as size and color.

有关所有可用图标的列表，请参阅 ionic.io/ionicons。有关样式和自定义 SVG 使用的更多信息，请参阅 使用页面。

¥For a list of all available icons, see ionic.io/ionicons. For more information including styling and custom SVG usage, see the Usage page.

基本用法​

¥Basic Usage

无障碍​

¥Accessibility

纯粹装饰性内容的图标应该有 aria-hidden="true"。这不会在视觉上隐藏图标，但会隐藏辅助技术的元素。

¥Icons that are purely decorative content should have aria-hidden="true". This will not visually hide the icon, but it will hide the element from assistive technology.

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

如果图标是交互式的，它应该具有通过添加 aria-label 定义的替代文本。

¥If the icon is interactive, it should have alternate text defined by adding an aria-label.

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

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

¥Alternatively, if the icon is inside of another element that it is describing, that element should have the aria-label added to it, and the icon should be hidden using aria-hidden.

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

目录