inno-icon
- Preview
- Angular
- React
- Vue
light background
dark background
<div class="component-display">
<div class="light-bg">
<span class="bg-title">light background</span>
<inno-icon icon='home' size='16' theme='light'></inno-icon>
<inno-icon icon='home' size='24' theme='light'></inno-icon>
<inno-icon icon='home' size='32' theme='light'></inno-icon>
<inno-icon icon-font='e902' size='16' theme='light'></inno-icon>
<inno-icon icon-font='e902' size='24' theme='light'></inno-icon>
<inno-icon icon-font='e902' size='32' theme='light'></inno-icon>
</div>
<div class="dark-bg">
<span class="bg-title">dark background</span>
<inno-icon icon='home' size='16' theme='light'></inno-icon>
<inno-icon icon='home' size='24' theme='light'></inno-icon>
<inno-icon icon='home' size='32' theme='light'></inno-icon>
<inno-icon icon-font='e902' size='16' theme='light'></inno-icon>
<inno-icon icon-font='e902' size='24' theme='light'></inno-icon>
<inno-icon icon-font='e902' size='32' theme='light'></inno-icon>
</div>
</div>
<div class="component-display">
<div class="light-bg">
<span class="bg-title">light background</span>
<InnoIcon icon='home' size='16' theme='light'></InnoIcon>
<InnoIcon icon='home' size='24' theme='light'></InnoIcon>
<InnoIcon icon='home' size='32' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='16' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='24' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='32' theme='light'></InnoIcon>
</div>
<div class="dark-bg">
<span class="bg-title">dark background</span>
<InnoIcon icon='home' size='16' theme='light'></InnoIcon>
<InnoIcon icon='home' size='24' theme='light'></InnoIcon>
<InnoIcon icon='home' size='32' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='16' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='24' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='32' theme='light'></InnoIcon>
</div>
</div>
<div class="component-display">
<div class="light-bg">
<span class="bg-title">light background</span>
<InnoIcon icon='home' size='16' theme='light'></InnoIcon>
<InnoIcon icon='home' size='24' theme='light'></InnoIcon>
<InnoIcon icon='home' size='32' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='16' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='24' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='32' theme='light'></InnoIcon>
</div>
<div class="dark-bg">
<span class="bg-title">dark background</span>
<InnoIcon icon='home' size='16' theme='light'></InnoIcon>
<InnoIcon icon='home' size='24' theme='light'></InnoIcon>
<InnoIcon icon='home' size='32' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='16' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='24' theme='light'></InnoIcon>
<InnoIcon iconFont='e902' size='32' theme='light'></InnoIcon>
</div>
</div>
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
icon | icon | The icon name. Use either this or the iconFont property. For possible values, see: https://innomotics.github.io/brand-experience/docs/icons/ | string | undefined |
iconFont | icon-font | Font icon code for the InnomoticsUiIcons font. Use either this or the icon property. For possible values, see: https://innomotics.github.io/brand-experience/docs/fonts/InnomoticsUiFont | string | undefined |
size | size | number | 16 | |
variant | variant | Color style of the icon. | "dark" | "light" | 'light' |
Dependencies
Used by
- inno-accordion
- inno-breadcrumb-item
- inno-button
- inno-date-picker
- inno-date-picker-dropdown
- inno-drag-and-drop
- inno-input
- inno-modal-header
- inno-paginator
- inno-popover
- inno-select
- inno-select-item
- inno-status-message
- inno-tab
Graph
Built with StencilJS