Introduction

The icon is a visual component in web and application design that allows users to add image/svg/icon choices. User can use this component to show some visual logos/images inside another component. It can define the use and purpose of the parent component.

Usage

The icon component is used to fetch and show some predefined icons. It can be used with Primary Button, List Box and other such components. Adding icon of Download on a download button can easily tell that the button is for download purpose.

Icon Sizes

The table below provides the size specifications: | Size | Dimensions | | ------------- | ---------- | | Mobile | 20 x 20 px | | Tablet | 22 x 22 px | | Web/Desktop | 24 x 24 px |

indreka-icon component

The <indreka-icon></indreka-icon> component having the following property:

1. iconType having type of string.
2. iconVersion having type of string.
3. iconName having type of string.
4. hidden having type of boolean.
5. label having type of string.
6. fill having type of string.
7. opacity having type of string.

use

We have to pass attributes/slots inside like:

1. iconType <indreka-icon iconType="type" iconVersion="iconVersion" iconName="iconName"></indreka-icon>

-- This is the type of the icon, it will look for the icon in the specific type folder.

2. iconVersion <indreka-icon iconType="type" iconVersion="iconVersion" iconName="iconName"></indreka-icon>

-- This is the version of the icon, it will look for the icon in the specific version folder.

3. iconName <indreka-icon iconType="type" iconVersion="iconVersion" iconName="iconName"></indreka-icon>

-- This is the version of the icon, it will look for the icon with the same name.

4. label <indreka-icon label="label"></indreka-icon>

-- This will set the aria-label for the icon.

5. hidden <indreka-icon hidden></indreka-icon>

-- This will set the aria-hidden to be true for the icon.

6. fill <indreka-icon fill="red"></indreka-icon>

-- This will set the color of icon.

7. opacity <indreka-icon opacity></indreka-icon>

-- This will set the opacity for the icon.

For changing the color of icon when used inside other components. This css can change the color to the desired color

indreka-icon {
	--color-default: value;
}

For use and selection of Icons, our Icon Library Documentation website can be referred.