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

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 />);
Copy link
On this page
Props:
Examples