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
1
import { whisper } from '@oliveai/ldk';
2
import {
3
Color,
4
Direction,
5
IconSize,
6
IconVariant,
7
JustifyContent,
8
StyleSize,
9
WhisperComponentType,
10
} from '@oliveai/ldk/dist/whisper/types';
11
12
whisper.create({
13
label: 'Icon Example',
14
components: [
15
{
16
type: whisper.WhisperComponentType.Box,
17
direction: Direction.Vertical,
18
justifyContent: JustifyContent.Left,
19
children: [
20
{
21
type: whisper.WhisperComponentType.Markdown,
22
body: 'Icon utilizes different Material Icons.',
23
},
24
{
25
type: whisper.WhisperComponentType.Box,
26
direction: Direction.Horizontal,
27
justifyContent: JustifyContent.Left,
28
children: [
29
{
30
type: whisper.WhisperComponentType.Icon,
31
name: 'star',
32
},
33
{
34
type: whisper.WhisperComponentType.Icon,
35
name: 'arrow_forward',
36
},
37
{
38
type: whisper.WhisperComponentType.Icon,
39
name: 'disc_full',
40
},
41
{
42
type: whisper.WhisperComponentType.Icon,
43
name: 'edit',
44
},
45
{
46
type: whisper.WhisperComponentType.Icon,
47
name: 'home',
48
},
49
],
50
},
51
{
52
type: whisper.WhisperComponentType.Divider,
53
layout: {
54
marginBottom: StyleSize.Small,
55
marginTop: StyleSize.Small,
56
},
57
},
58
{
59
type: whisper.WhisperComponentType.Markdown,
60
body: 'Icon with a click handler or disabled, and have a tooltip.',
61
},
62
{
63
type: whisper.WhisperComponentType.Box,
64
direction: Direction.Horizontal,
65
justifyContent: JustifyContent.Left,
66
children: [
67
{
68
type: whisper.WhisperComponentType.Icon,
69
name: 'arrow_forward',
70
onClick: () => console.log('Clicked Active'),
71
},
72
{
73
type: whisper.WhisperComponentType.Icon,
74
disabled: true,
75
name: 'arrow_forward',
76
onClick: () => console.log('Clicked Disabled'),
77
},
78
],
79
},
80
{
81
type: whisper.WhisperComponentType.Divider,
82
layout: {
83
marginBottom: StyleSize.Small,
84
marginTop: StyleSize.Small,
85
},
86
},
87
{
88
type: whisper.WhisperComponentType.Markdown,
89
body: 'Icons with different sizes.',
90
},
91
{
92
type: whisper.WhisperComponentType.Box,
93
direction: Direction.Horizontal,
94
justifyContent: JustifyContent.Left,
95
children: [
96
{
97
type: whisper.WhisperComponentType.Icon,
98
name: 'add_circle',
99
size: IconSize.Small,
100
},
101
{
102
type: whisper.WhisperComponentType.Icon,
103
name: 'add_circle',
104
size: IconSize.Medium,
105
},
106
{
107
type: whisper.WhisperComponentType.Icon,
108
name: 'add_circle',
109
size: IconSize.Large,
110
},
111
{
112
type: whisper.WhisperComponentType.Icon,
113
name: 'add_circle',
114
size: IconSize.XLarge,
115
},
116
],
117
},
118
{
119
type: whisper.WhisperComponentType.Divider,
120
layout: {
121
marginBottom: StyleSize.Small,
122
marginTop: StyleSize.Small,
123
},
124
},
125
{
126
type: whisper.WhisperComponentType.Markdown,
127
body: 'Icons with different colors.',
128
},
129
{
130
type: whisper.WhisperComponentType.Box,
131
direction: Direction.Horizontal,
132
justifyContent: JustifyContent.Left,
133
children: [
134
{
135
type: whisper.WhisperComponentType.Icon,
136
name: 'add_location',
137
color: Color.Black,
138
},
139
{
140
type: whisper.WhisperComponentType.Icon,
141
name: 'add_location',
142
color: Color.Accent,
143
},
144
{
145
type: whisper.WhisperComponentType.Icon,
146
name: 'add_location',
147
color: Color.Grey,
148
},
149
{
150
type: whisper.WhisperComponentType.Icon,
151
name: 'add_location',
152
color: Color.WhisperStrip,
153
},
154
{
155
type: whisper.WhisperComponentType.Icon,
156
name: 'add_location',
157
color: Color.White,
158
},
159
],
160
},
161
{
162
type: whisper.WhisperComponentType.Divider,
163
layout: {
164
marginBottom: StyleSize.Small,
165
marginTop: StyleSize.Small,
166
},
167
},
168
{
169
type: whisper.WhisperComponentType.Markdown,
170
body: 'Different Icon variants.',
171
},
172
{
173
type: whisper.WhisperComponentType.Box,
174
direction: Direction.Horizontal,
175
justifyContent: JustifyContent.Left,
176
children: [
177
{
178
type: whisper.WhisperComponentType.Icon,
179
name: 'account_balance_wallet',
180
},
181
{
182
type: whisper.WhisperComponentType.Icon,
183
name: 'account_balance_wallet',
184
variant: IconVariant.Outlined,
185
},
186
{
187
type: whisper.WhisperComponentType.Icon,
188
name: 'account_balance_wallet',
189
variant: IconVariant.Round,
190
},
191
{
192
type: whisper.WhisperComponentType.Icon,
193
name: 'account_balance_wallet',
194
variant: IconVariant.Sharp,
195
},
196
{
197
type: whisper.WhisperComponentType.Icon,
198
name: 'account_balance_wallet',
199
variant: IconVariant.TwoTone,
200
},
201
],
202
},
203
{
204
type: whisper.WhisperComponentType.Divider,
205
layout: {
206
marginBottom: StyleSize.Small,
207
marginTop: StyleSize.Small,
208
},
209
},
210
],
211
},
212
],
213
});
Copied!
1
import * as React from 'react';
2
import '@oliveai/ldk';
3
import * as ReactWhisper from '@oliveai/ldk/dist/whisper/react/renderer';
4
import {
5
Color,
6
Direction,
7
IconSize,
8
IconVariant,
9
JustifyContent,
10
StyleSize,
11
} from '@oliveai/ldk/dist/whisper';
12
13
const IconExample = () => {
14
return (
15
<oh-whisper label="Icon Example" onClose={() => {}}>
16
<>
17
<oh-box
18
direction={Direction.Vertical}
19
justifyContent={JustifyContent.Left}
20
>
21
<oh-markdown body={'Icon utilizes different Material Icons.'} />
22
<oh-box
23
direction={Direction.Horizontal}
24
justifyContent={JustifyContent.Left}
25
>
26
<oh-icon name="star" />
27
<oh-icon name="arrow_forward" />
28
<oh-icon name="disc_full" />
29
<oh-icon name="edit" />
30
<oh-icon name="home" />
31
</oh-box>
32
<oh-divider
33
layout={{
34
marginBottom: StyleSize.Small,
35
marginTop: StyleSize.Small,
36
}}
37
/>
38
<oh-markdown
39
body={'Icon with a click handler or disabled, and have a tooltip.'}
40
/>
41
<oh-box
42
direction={Direction.Horizontal}
43
justifyContent={JustifyContent.Left}
44
>
45
<oh-icon
46
name="arrow_forward"
47
onClick={() => {
48
console.log('Clicked Active');
49
}}
50
tooltip="Tooltip"
51
/>
52
<oh-icon
53
disabled={true}
54
name="arrow_forward"
55
onClick={() => {
56
console.log('Clicked Disabled');
57
}}
58
tooltip="Other tooltip"
59
/>
60
</oh-box>
61
<oh-divider
62
layout={{
63
marginBottom: StyleSize.Small,
64
marginTop: StyleSize.Small,
65
}}
66
/>
67
<oh-markdown body={'Icons with different sizes.'} />
68
<oh-box
69
direction={Direction.Horizontal}
70
justifyContent={JustifyContent.Left}
71
>
72
<oh-icon name="add_circle" size={IconSize.Small} />
73
<oh-icon name="add_circle" size={IconSize.Medium} />
74
<oh-icon name="add_circle" size={IconSize.Large} />
75
<oh-icon name="add_circle" size={IconSize.XLarge} />
76
</oh-box>
77
<oh-divider
78
layout={{
79
marginBottom: StyleSize.Small,
80
marginTop: StyleSize.Small,
81
}}
82
/>
83
<oh-markdown body={'Icons with different colors.'} />
84
<oh-box
85
direction={Direction.Horizontal}
86
justifyContent={JustifyContent.Left}
87
>
88
<oh-icon name="add_location" color={Color.Black} />
89
<oh-icon name="add_location" color={Color.Accent} />
90
<oh-icon name="add_location" color={Color.Grey} />
91
<oh-icon name="add_location" color={Color.WhisperStrip} />
92
<oh-icon name="add_location" color={Color.White} />
93
</oh-box>
94
<oh-divider
95
layout={{
96
marginBottom: StyleSize.Small,
97
marginTop: StyleSize.Small,
98
}}
99
/>
100
<oh-markdown body={'Different Icon variants.'} />
101
<oh-box
102
direction={Direction.Horizontal}
103
justifyContent={JustifyContent.Left}
104
>
105
<oh-icon name="account_balance_wallet" size={IconSize.XLarge} />
106
<oh-icon
107
name="account_balance_wallet"
108
size={IconSize.XLarge}
109
variant={IconVariant.Outlined}
110
/>
111
<oh-icon
112
name="account_balance_wallet"
113
size={IconSize.XLarge}
114
variant={IconVariant.Round}
115
/>
116
<oh-icon
117
name="account_balance_wallet"
118
size={IconSize.XLarge}
119
variant={IconVariant.Sharp}
120
/>
121
<oh-icon
122
name="account_balance_wallet"
123
size={IconSize.XLarge}
124
variant={IconVariant.TwoTone}
125
/>
126
</oh-box>
127
<oh-divider
128
layout={{
129
marginBottom: StyleSize.Small,
130
marginTop: StyleSize.Small,
131
}}
132
/>
133
</oh-box>
134
</>
135
</oh-whisper>
136
);
137
};
138
139
ReactWhisper.renderNewWhisper(<IconExample />);
Copied!
Copy link