import { IconSymbol } from '@uhg-abyss/mobile';<IconSymbol icon="home" size={40} variant="filled" color="$semantic.color.icon.status.info" />Icons
Use the icon property to adjust which icon is being selected.
Colors
Use the color property to adjust the color of a material symbol icon. The default color is set to the theme 'interactive1'.
Size
Use the size property to adjust the size of an icon by setting it to a specific number or token. The default size is set to 24.
Token sizes: $icon.sizing.xs: 16 $icon.sizing.sm: 20 $icon.sizing.md: 24 $icon.sizing.lg: 40 $icon.sizing.xl: 48
Material Symbol Variants
Use the variant property to change the style of Material symbol icons. The default variant is filled.
IconSymbol Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| color | string | $icon.color.default | Set the color of the material symbol icon |
| disableScaling | boolean | false | Specifies whether the icon should scale to respect Text Size accessibility settings |
| fallback | JSX.Element | - | Fallback element to render when the icon fails to load |
| icon | string | - | Name of the material symbol icon |
| isScreenReadable | boolean | false | Indicate whether the icon is screen readable or not. If the icon is Screen Readable, then provide a title |
| maxFontSizeMultiplier | boolean | - | Specifies the largest possible scale the icon can reach when disableScaling is false |
| onError | function | - | Callback function when the icon fails to load |
| onLoad | function | - | Callback function when the icon is loaded |
| size | number | string | $icon.sizing.md | Set the size of the material symbol icon |
| title | string | - | Set the title of the icon |
| variant | filled | outlined | filled | The style variation of the material symbol icon |
IconSymbol Classes
| Class Name | Description |
|---|---|
| abyss-icon-symbol-root | Material symbol icon root element |
Icon Tokens
| Token Name | Value | |
|---|---|---|
| icon.color.default | #196ECF | |
| icon.sizing.xs | 16 | |
| icon.sizing.sm | 20 | |
| icon.sizing.md | 24 | |
| icon.sizing.lg | 40 | |
| icon.sizing.xl | 48 |