Icon component is a web component that displays an icon.
Icon component has built in sizes. Can be xs, sm, md, lg, xl, xxl. Default is md. You can also set the size in pixels using the staticSize attribute.
Icon components by default get the color from the parent component, with the fill color set to currentColor.
To set all the icon and dedicated icon components to a specific color, you can use the .dap-ds-icon class.
.dap-ds-icon, // this selects all the <dap-ds-icon> components
.dap-ds-icon::part(icon) // this selects all the dedicated icon components like <dap-ds-icon-xxx>
{
fill: var(--dds-high-contrast-interactive);
}
You can also use custom icons by adding the svg code inside the icon tag. The easiest way to do this is to copy the svg code from the icon you want to use from the Remix Icon website.
All the built in icons have their own dedicated components. You can use them like this:
<dap-ds-icon-xxx />
import { DapDSIcon } from 'dap-design-system'
import { DapDSIconReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSIcon } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
name | string | The name of the icon | |
size | 'xxl', 'xl' , 'lg' , 'md' , 'sm' , 'xs' | 'md' | The size of the icon |
staticSize | number, undefined | The size of the icon in pixels. This overrides the size attribute. | |
focusable | boolean, undefined | false | Whether the icon is focusable. Default is false. |
ariaHidden | boolean | Whether the icon is hidden from the accessibility tree. Default is true. | |
ariaLabel | string | The aria label of the icon. |
| Name | Description |
|---|---|
(default) | The content of the icon for custom svg icons. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main icon container. |
icon | The icon of the icon. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-icon::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-icon::part(base),
.my-custom-dap-ds-icon::part(icon) {
/* Shared styles */
}
Example usage:
<dap-ds-icon class="my-custom-dap-ds-icon">
Icon
</dap-ds-icon>
.my-custom-dap-ds-icon::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-icon-size-xs | The size of extra small icons (default: 12px) |
--dds-icon-size-sm | The size of small icons (default: 16px) |
--dds-icon-size-md | The size of medium icons (default: 20px) |
--dds-icon-size-lg | The size of large icons (default: 24px) |
--dds-icon-size-xl | The size of extra large icons (default: 32px) |
--dds-icon-size-xxl | The size of extra extra large icons (default: 40px) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-icon
style="--dds-icon-size-xs: value; --dds-icon-size-sm: value;">
Icon
</dap-ds-icon>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-icon {
--dds-icon-size-xs: value;
--dds-icon-size-sm: value;
--dds-icon-size-md: value;
}
<dap-ds-icon class="my-custom-dap-ds-icon">
Icon
</dap-ds-icon>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-icon {
--dds-icon-size-xs: value;
--dds-icon-size-sm: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
