- GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-with-wrapper](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-with-wrapper)
- Storybook: [Icon](https://designsystem.dn.se/?path=/docs/foundations-icons--docs)
- Storybook (Latest): [Icon](https://designsystem-latest.dn.se/?path=/docs/foundations-icons--docs)

----

# Icon (with wrapper)

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|icon | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
|color | String | no | primary, primary-02 etc | primary | Any icon color, use without `icon-` prefix. For all available colors see: https://designsystem.dn.se/?path=/story/foundations-colors--colors |
|size| Int | no | 16, 20, 24, 32, 40 | 24 | |
|classNames | String | no | | | Ex. "my-special-class" |
|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/icon-with-wrapper/icon-with-wrapper.njk' import IconWithWrapper %}

{{ IconWithWrapper({
  icon: 'arrow_back',
  color: 'primary-02',
  size: 32,
  classNames: 'my-special-class'
}) | safe }}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/icon-with-wrapper/icon-with-wrapper";
```

## Minimum requirement example for icon **without** wrapper

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|icon | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
|classNames | String | no | | | Ex. "my-special-class" |
|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
|~forcePx~ | | | | | Not supported |

```html
{% from '@bonniernews/dn-design-system-web/foundations/icons/icon.njk' import Icon %}

{{ Icon({ icon: 'arrow_back' }) | safe }}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/foundations/icons/icon";
```