Icon - Olive Developer Documentation

Props:
Properties
Descriptions
Required
Default
color
The color of the component.
Color.Black
disabled
If true, the component is no longer interactive and is greyed out. 
false
name
The name of the Google Fonts Material Icon to be rendered.  List of supported icons: HERE​
​
onClick
Callback function that executes when the component is clicked.
​
size
Size of the icon to be rendered.
IconSize.Medium
tooltip
Text that appears when hovering over the component.
​
variant
The default look is for icons to be filled. This can be overridden with:
IconVariant.Outlined
IconVariant.Round
IconVariant.Sharp
IconVariant.TwoTone
​
​
​
​
Examples
Examples of icons with different properties.
Javascript
React
import { whisper } from '@oliveai/ldk';
import {
  Color,
  Direction,
  IconSize,
  IconVariant,
  JustifyContent,
  StyleSize,
  WhisperComponentType,
} from '@oliveai/ldk/dist/whisper/types';
​
whisper.create({
  label: 'Icon Example',
  components: [
    {
      type: whisper.WhisperComponentType.Box,
      direction: Direction.Vertical,
      justifyContent: JustifyContent.Left,
      children: [
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icon utilizes different Material Icons.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'star',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'arrow_forward',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'disc_full',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'edit',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'home',
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icon with a click handler or disabled, and have a tooltip.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'arrow_forward',
              onClick: () => console.log('Clicked Active'),
            },
            {
              type: whisper.WhisperComponentType.Icon,
              disabled: true,
              name: 'arrow_forward',
              onClick: () => console.log('Clicked Disabled'),
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icons with different sizes.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.Small,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.Medium,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.Large,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_circle',
              size: IconSize.XLarge,
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Icons with different colors.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.Black,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.Accent,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.Grey,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.WhisperStrip,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'add_location',
              color: Color.White,
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
        {
          type: whisper.WhisperComponentType.Markdown,
          body: 'Different Icon variants.',
        },
        {
          type: whisper.WhisperComponentType.Box,
          direction: Direction.Horizontal,
          justifyContent: JustifyContent.Left,
          children: [
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.Outlined,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.Round,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.Sharp,
            },
            {
              type: whisper.WhisperComponentType.Icon,
              name: 'account_balance_wallet',
              variant: IconVariant.TwoTone,
            },
          ],
        },
        {
          type: whisper.WhisperComponentType.Divider,
          layout: {
            marginBottom: StyleSize.Small,
            marginTop: StyleSize.Small,
          },
        },
      ],
    },
  ],
});
import * as React from 'react';
import '@oliveai/ldk';
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
import {
  Color,
  Direction,
  IconSize,
  IconVariant,
  JustifyContent,
  StyleSize,
} from '@oliveai/ldk/dist/whisper';
​
const IconExample = () => {
  return (
    <oh-whisper label="Icon Example" onClose={() => {}}>
      <>
        <oh-box
          direction={Direction.Vertical}
          justifyContent={JustifyContent.Left}
        >
          <oh-markdown body={'Icon utilizes different Material Icons.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="star" />
            <oh-icon name="arrow_forward" />
            <oh-icon name="disc_full" />
            <oh-icon name="edit" />
            <oh-icon name="home" />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown
            body={'Icon with a click handler or disabled, and have a tooltip.'}
          />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon
              name="arrow_forward"
              onClick={() => {
                console.log('Clicked Active');
              }}
              tooltip="Tooltip"
            />
            <oh-icon
              disabled={true}
              name="arrow_forward"
              onClick={() => {
                console.log('Clicked Disabled');
              }}
              tooltip="Other tooltip"
            />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown body={'Icons with different sizes.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="add_circle" size={IconSize.Small} />
            <oh-icon name="add_circle" size={IconSize.Medium} />
            <oh-icon name="add_circle" size={IconSize.Large} />
            <oh-icon name="add_circle" size={IconSize.XLarge} />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown body={'Icons with different colors.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="add_location" color={Color.Black} />
            <oh-icon name="add_location" color={Color.Accent} />
            <oh-icon name="add_location" color={Color.Grey} />
            <oh-icon name="add_location" color={Color.WhisperStrip} />
            <oh-icon name="add_location" color={Color.White} />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
          <oh-markdown body={'Different Icon variants.'} />
          <oh-box
            direction={Direction.Horizontal}
            justifyContent={JustifyContent.Left}
          >
            <oh-icon name="account_balance_wallet" size={IconSize.XLarge} />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.Outlined}
            />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.Round}
            />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.Sharp}
            />
            <oh-icon
              name="account_balance_wallet"
              size={IconSize.XLarge}
              variant={IconVariant.TwoTone}
            />
          </oh-box>
          <oh-divider
            layout={{
              marginBottom: StyleSize.Small,
              marginTop: StyleSize.Small,
            }}
          />
        </oh-box>
      </>
    </oh-whisper>
  );
};
​
ReactWhisper.renderNewWhisper(<IconExample />);
Whisper Components - Previous
Next - Whisper Components
List Pair
Last modified 4mo ago
Copy link
On this page
Props:
Examples