An element, used to show an icon in Dreamworld Apps.
npm install --save @dreamworld/dw-icon
<dw-icon name="action_alarm"></dw-icon>
It internally uses @material/mwc-icon
to render material icons. But, User is allowed to override any of the
material icon (if necessary). And can add any application specific icons as well.
In mwc-icon we can't override any icon OR can't add application specific icons. So, When mwc-icon is used by the inter-app re-usable web-component, application has no way to customize it's icon.
- name (String)
- size (Number)
- disabled (Boolean),
disabled
has higher priority, so, whenactive
anddisabled
both are specified. It will be effectivelydisabled
. - active (Boolean)
- iconFont (String (ENUM)), possible values:
FILLED
andOUTLINED
. Default isFILLED
--dw-icon-color-active
--dw-icon-color
--dw-icon-color-disabled
By default icon is rendered in 24px
size. You can render it in different size when needed.
<dw-icon name="action_alarm" size="16"></dw-icon>
If application specific icon
DwIcon.addIcons({
{icon_name}: {svgIcon}
});
e.g.
DwIcon.addIcons({
kerika_chat: svg``
});
icon_name
is used to set different sized icons. e.g.
DwIcon.addIcons({
kerika_chat: {svgIcon},
kerika_chat_16: {svgIcon}
});
kerika_chat
is default sized (24px) icon. While kerika_chat_16
is of 16px size.
Icon must be added before it's usage. So, add application specific icons from app-shell only.
This could be done in the same way as Add application icons. Just use material icon's name as name
.