LogoLogo
Developer HubGitHubContact Us
  • Welcome!
  • Olive Helps
    • Platform
      • How Olive Helps Works
      • Installation
      • Account Creation
      • Distributing Olive Helps
    • FAQs
      • General Loop FAQs
      • Loop Development FAQs
      • Olive Helps User FAQs
      • Security / IT FAQs
    • Data Security
      • User Data
      • Antivirus and Firewalls
  • Loop Development Kit
    • Your First Loop
      • Become a Loop Author
      • Creating a Loop
      • Build Your Loop
      • Local Loop Installation
      • Restarting Local Loops
    • Troubleshooting
    • Loop Security
      • Permissions
      • Environment Permissions
    • Loop Publication
      • Loop Approval Checklist
    • Loop Analytics Library
    • Examples
  • Documentation
  • Interfaces
  • Type Alias
  • Enumerations
  • Whisper Components
    • Base Attributes
    • Autocomplete
    • Box
    • Breadcrumb
    • Button
    • Chart
    • CollapseBox
    • Grid
    • Checkbox
    • Date Time
    • Divider
    • DropZone
    • Email
    • Icon
    • List Pair
    • Link
    • Pagination
    • Number
    • Markdown
    • Message
    • Password
    • Progress
    • Radio
    • Rating
    • RichTextEditor
    • Section Title
    • Select
    • Text Input
    • Telephone
    • Typography
  • APTITUDES
    • What are Aptitudes?
    • Browser
    • Clipboard
    • Config
    • Cursor
      • Screen Scaling Behavior
    • Document
    • Filesystem
    • Keyboard
    • Network
    • Process
    • Screen
    • Search
      • Index
    • System
    • UI
      • Loop UI Handlers
    • User
      • JWT
    • Vault
    • Whisper
      • Whisper Updates
      • JSX Whispers
    • Window
      • Screen Scaling Behavior
  • Release Notes
    • What's New
      • Olive Helps v0.55.0
      • Olive Helps v0.54.1
      • Olive Helps v0.53.1
      • Olive Helps v0.51.2
      • LDK v4.0.0
      • Olive Helps v0.50.3
      • Olive Helps v0.49.5
      • LDK v 3.18.0
      • Olive Helps v0.47.2
      • Olive Helps v0.46.2
      • LDK v 3.17.0
      • Olive Helps v0.45.4
      • Olive Helps v0.44.2
      • Olive Helps v0.43.1
      • Olive Helps v0.42.1
      • Olive Helps v0.41.4
      • Olive Helps v0.40.2
      • Olive Helps v0.39.4 & LDK v3.16.0
      • Olive Helps v0.38.8 & LDK v3.15.0
      • Olive Helps v0.36.5
      • Olive Helps v0.36.4
    • Archive
      • Olive Helps v0.36.3 & LDK v3.14.0
      • Olive Helps v0.34.4
      • LDK v3.13.0
      • Olive Helps v0.32.2 & LDK v3.12.0
      • Olive Helps v0.31.2 & LDK v3.11.0
      • Olive Helps v0.30.2 & LDK v3.10.0
      • Olive Helps v0.29.4
      • Olive Helps v0.29.3 & LDK v3.9.0
      • Olive Helps v0.28.3 & LDK v3.8.0
      • Olive Helps v0.27.7
      • Olive Helps v0.27.5
      • Olive Helps v.027.4
      • Olive Helps v0.27.2 & LDK v3.7.0
      • Olive Helps v0.25.3 & LDK v3.5.1
      • Olive Helps v0.24.6 & LDK v3.4.0
      • Olive Helps v0.23.2 & LDK v3.3.0
      • Olive Helps v0.22.3 & LDK v3.2.0
Powered by GitBook
On this page
  • Props:
  • Examples

Was this helpful?

  1. Whisper Components

Icon

Symbols / images using Material icons with customizable colors and sizes.

PreviousEmailNextList Pair

Last updated 3 years ago

Was this helpful?

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

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

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 />);

The name of the Google Fonts Material Icon to be rendered. List of supported icons:

HERE
Examples of icons with different properties.