@dreamworld/dw-icon-button
v3.2.8
Published
## Why don't we use `mwc-icon-button`? - We created `dw-icon` to have extended icon set, sepecific to the app. But, those icons we can't be used with `mwc-icon-button`. - We found issue with `mwc-icon-button` that it can't be resized easily.
Downloads
320
Keywords
Readme
dw-icon-button
Why don't we use mwc-icon-button
?
- We created
dw-icon
to have extended icon set, sepecific to the app. But, those icons we can't be used withmwc-icon-button
. - We found issue with
mwc-icon-button
that it can't be resized easily.
Usage
<dw-icon-button icon="" disabled></dw-icon-button>
Customize size
- Integrater/User should write
width
&height
css fordw-icon-button
.
We don't support icon in light-dom (
slot
) as supported by [mwc-icon-button
]
Properties
icon
disabled
primary
Set when icon is to be shown in primary color.secondary
Set when icon is to be shown in secondary color.iconSize
, No default value. So, default size ofdw-icon
is used (which is 24px.)buttonSize
, No default value. So, default icon container size is it's parent height and width. If buttonSize is exists then icon container size base onbuttonSize
property.title
: When it's provided, on mouse enter, shows title text as a tooltip.disabledTitle
: When it's provided and icon is disable, on mouse enter, shows disabledTitle text as a tooltip.placement
: Set tooltip position. Default value is top.Note: The "disabledTitle" property displays the tooltip only when the icon-button is disabled, whereas the "title" property displays the tooltip when the icon-button is not disabled. Set both properties to show the tooltip in both cases.
Custom CSS Properties
--dw-icon-color-active
--dw-icon-color
--dw-icon-color-disabled