Skip to main content

IconSymbol

Used to implement material symbol icons and adapt their properties.

github
View source code
figma
View design
import { IconSymbol } from '@uhg-abyss/mobile';
    () => {
      return (
        <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: $xs: 16 $sm: 20 $md: 24 $lg: 40 $xl: 48

    Material Symbol Variants​

    Use the variant property to change the style of Material symbol icons. The default variant is filled.

    IconSymbol Props​

    NameTypeDefaultRequiredDescription
    color
    Abyss.Color | ((colorScheme: Abyss.ColorScheme) => Abyss.Color) | undefined
    '$icon.color.default'
    		-
    Set the color of the material symbol icon
    delayLongPress
    number | undefined
    		--
    Delay in milliseconds before the onLongPress callback is triggered.
    delayPressIn
    number | undefined
    		--
    Delay in milliseconds before the onPressIn callback is triggered.
    delayPressOut
    number | undefined
    		--
    Delay in milliseconds before the onPressOut callback is triggered.
    disabled
    boolean | undefined
    		--
    Disables press interactions for the icon.
    disableScaling
    boolean | undefined
    false
    		-
    Specifies whether the icon should scale to respect Text Size accessibility settings
    fallback
    React.JSX.Element | undefined
    		--
    Element to render if the icon fails to load
    icon
    Extract< keyof typeof iconSymbolCategories | keyof typeof symbol.filled, string >
    		-
    Name of the material symbol icon
    isScreenReadable
    boolean | undefined
    		--
    Indicate whether the icon is screen readable or not. If the icon is screen readable, then
    provide a title
    maxFontSizeMultiplier
    number | undefined
    		--
    Specifies the largest possible scale the icon can reach when disableScaling is false
    onError
    () => void | undefined
    		--
    Callback function to be called when the icon fails to load
    onLoad
    () => void | undefined
    		--
    Callback function to be called when the icon is loaded
    onLongPress
    (event: GestureResponderEvent) => void | undefined
    		--
    Callback fired after a long press gesture is detected.
    onPress
    (event: GestureResponderEvent) => void | undefined
    		--
    Callback fired when the icon is pressed.
    onPressIn
    (event: GestureResponderEvent) => void | undefined
    		--
    Callback fired when a press-in gesture starts.
    onPressOut
    (event: GestureResponderEvent) => void | undefined
    		--
    Callback fired when a press-in gesture ends.
    size
    Abyss.Size | undefined
    '$icon.sizing.md'
    		-
    Set the size of the icon
    sizes
    Record<string, number> | undefined
    		-
    Pre programmed sizes for the icons
    title
    string | undefined
    		--
    Set the title of the icon
    variant
    'filled' | 'outlined' | undefined
    'filled'
    		-
    The style variation of the material symbol icon.

    IconSymbol Classes​

    Class NameDescription
    abyss-icon-symbol-rootMaterial symbol icon root element

    Icon Tokens​

    Token NameValue
    icon.color.default
    #196ECF
    icon.sizing.xs
    16
    icon.sizing.sm
    20
    icon.sizing.md
    24
    icon.sizing.lg
    40
    icon.sizing.xl
    48
    Table of Contents