| {"include \"data/octicons\"" => nil} |
|---|
Octicons can be used with the Icon component and several other components, including the Badge and Button.
For the Icon component, the icon is specified using the syntax :icon-shortcode:, where shortcode is the name of the icon (found in the table below).
For example, use the code :icon-rocket: for a :icon-rocket: icon.
When an icon is used in other components, the icon is referred to by only the shortcode.
For example, the following demonstrates using the icon in a Badge and a Button.
| Component | Sample |
|---|---|
| [!badge icon="rocket" text="rocket"] | [!badge icon="rocket" text="rocket"] |
| [!button icon="rocket" text="rocket"] | [!button icon="rocket" text="rocket"] |
When an icon is specified within the Page or Project metadata, the icon can be referred to by only its shortcode.
The following sample demonstrates setting a Page icon to a :icon-rocket:.
---
icon: rocket
---
# Sample
This is a sample page with a :icon-rocket: icon.
There are {{ octicons_new.size }} [!badge variant="info" text="NEW"] icons in Retype v{{ version }}:
{{ include "components/octicons" list:octicons_new }}
As of v{{ version }}, there are {{ octicons.size }} Octicons supported and more being added with each new release.
{{ include "components/octicons" list:octicons }}