Icon Edit

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

Usage Usage

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.

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.