# @dreamworld/dw-icon

> An element, used to show an icon in Dreamworld Apps.

Latest version **4.1.3** (published 2024-09-11) · ISC license · 0 weekly downloads

## Install

```sh
npm install @dreamworld/dw-icon
pnpm add @dreamworld/dw-icon
yarn add @dreamworld/dw-icon
bun add @dreamworld/dw-icon
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.1.3 |
| Published | 2024-09-11 |
| First published | 2019-09-02 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 12.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | chiragmoradiya, chetang7, ajay-dhameliya, dw-devops |

## Links

- npm: https://www.npmjs.com/package/@dreamworld/dw-icon
- Repository: https://github.com/DreamworldSolutions/dw-icon
- Homepage: https://github.com/DreamworldSolutions/dw-icon#readme
- Issues: https://github.com/DreamworldSolutions/dw-icon/issues
- npm.io page: https://npm.io/package/@dreamworld/dw-icon

## Dependencies (2)

- [@material/mwc-icon](https://npm.io/package/@material/mwc-icon.md) 0.27.0
- [@dreamworld/pwa-helpers](https://npm.io/package/@dreamworld/pwa-helpers.md) ^1.13.1

## Recent versions

- 4.1.3 (latest) — 2024-09-11
- 4.1.3-event-listen-add-passive-true.1 (event-listen-add-passive-true) — 2024-09-11
- 4.1.2-stop-propagation-touchstart-mousedown.1 (stop-propagation-touchstart-mousedown) — 2024-08-29
- 4.1.1-ssr.1 (ssr) — 2023-02-14
- 4.1.0-material-symbols.1 (material-symbols) — 2022-10-31
- 2.2.3-development.2 (development) — 2022-05-23
- 2.2.0-upgrade-version.1 (upgrade-version) — 2021-09-08
- 2.1.1-fix-add-icons.1 (fix-add-icons) — 2021-08-17
- 1.4.2-update-mwc.1 (update-mwc) — 2021-01-11
- 1.4.1-update-config.1 (update-config) — 2020-10-26
- 1.4.0-use-our-lit-element-instead-of-lit-element-base-class.1 (use-our-lit-element-instead-of-lit-element-base-class) — 2020-07-25
- 1.2.1-set-pointer-event-none.1 (set-pointer-event-none) — 2020-04-22
- 1.2.0-icon-width-height.1 (icon-width-height) — 2020-02-14
- 1.1.1-use-styleMap-for-icon-size.1 (use-styleMap-for-icon-size) — 2020-02-09
- 1.1.0-support-backward-compatible-get-icon.1 (support-backward-compatible-get-icon) — 2019-12-04
- … 25 more at https://npm.io/package/@dreamworld/dw-icon/versions

## README

# dw-icon

An element, used to show an icon in Dreamworld Apps.

## Usage
```js
npm install --save @dreamworld/dw-icon
```

```html
<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.

## Why did we create separate element than `mwc-icon`?
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.

## Properties
- name (String)
- size (Number)
- disabled (Boolean), `disabled` has higher priority, so, when  `active` and `disabled` both are specified. It will be
 effectively `disabled`.
- active (Boolean)
- iconFont (String (ENUM)), possible values: `FILLED` and `OUTLINED`. Default is `FILLED`

## Custom CSS Properties

```
--dw-icon-color-active
--dw-icon-color
--dw-icon-color-disabled
```

## Size 
By default icon is rendered in `24px` size. You can render it in different size when needed.


```html
<dw-icon name="action_alarm" size="16"></dw-icon>
```

> If application specific icon 

## Add application icons 
```js
DwIcon.addIcons({
    {icon_name}: {svgIcon}
});
```

e.g.

```js
DwIcon.addIcons({
    kerika_chat: svg``
});
```
`icon_name` is used to set different sized icons. e.g.
```js
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.

## Override material icons
This could be done in the same way as **Add application icons**. Just use material icon's name as `name`.

---
_Source: https://npm.io/package/@dreamworld/dw-icon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._