Flux

Icon ​

This component displays a single customizable Font Awesome icon, rendered as SVG by default. It is commonly used in various Flux components, including Buttons, and can be easily styled with CSS. It can also render icons with the Font Awesome webfont. See Font Awesome.

Please refer to Font Awesome to read more about the usage of icons.

There is also a Boxed icon component available.

Props

name?: FluxIconName
The name of the icon to use.

color?: FluxColor
Colors the icon using the palette's 600 shade. When omitted, the icon inherits its color from the parent.

size?: number | string
The size of the icon.

icon-style?: FluxIconStyle
Overrides the Font Awesome family/style for this icon in font mode (for example brands). Ignored in the default SVG mode.

aria-label?: string
An accessible label for the icon. When omitted, the icon is hidden from assistive technology.

Emits

click: [MouseEvent]
Triggered when the icon is clicked.

Examples ​

Colored

<template>
    <FluxFlex :gap="36">
        <FluxIcon
            color="gray"
            name="rocket"
            :size="48"/>

        <FluxIcon
            color="primary"
            name="rocket"
            :size="48"/>

        <FluxIcon
            color="danger"
            name="rocket"
            :size="48"/>

        <FluxIcon
            color="info"
            name="rocket"
            :size="48"/>

        <FluxIcon
            color="success"
            name="rocket"
            :size="48"/>

        <FluxIcon
            color="warning"
            name="rocket"
            :size="48"/>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex, FluxIcon } from '@flux-ui/components';
</script>

Snippet ​

vue
<FluxIcon name="rocket"/>