Icon Edit

Allows you to render a raw icon without any initial styling or wrappers.

Usage #Usage

Top ↑

With a Dashicon #With a Dashicon

import { Icon } from '@wordpress/components';

const MyIcon = () => <Icon icon="screenoptions" />;

Top ↑

With a function #With a function

import { Icon } from '@wordpress/components';

const MyIcon = () => (
    <Icon
        icon={ () => (
            <svg>
                <path d="M5 4v3h5.5v12h3V7H19V4z" />
            </svg>
        ) }
    />
);

Top ↑

With a Component #With a Component

import { MyIconComponent } from '../my-icon-component';
import { Icon } from '@wordpress/components';

const MyIcon = () => <Icon icon={ MyIconComponent } />;

Top ↑

With an SVG #With an SVG

import { Icon } from '@wordpress/components';

const MyIcon = () => (
    <Icon
        icon={
            <svg>
                <path d="M5 4v3h5.5v12h3V7H19V4z" />
            </svg>
        }
    />
);

Top ↑

Specifying a className #Specifying a className

import { Icon } from '@wordpress/components';

const MyIcon = () => <Icon icon="screenoptions" className="example-class" />;

Top ↑

Props #Props

The component accepts the following props. Any additional props are passed through to the underlying icon element.

Top ↑

icon #icon

The icon to render. Supported values are: Dashicons (specified as strings), functions, WPComponent instances and null.

• Type: String|Function|WPComponent|null
• Required: No
• Default: null

Top ↑

size #size

The size (width and height) of the icon.

• Type: Number
• Required: No
• Default: 20 when a Dashicon is rendered, 24 for all other icons.