# Icon

#### cf-icon

One feature of CF icons is when setting the name of the icon to a material icon or font awesome name it will render automatically without specifying the type. Another feature is the icon's toggle state, so when you click on an icon you can specify to what icon and value to change to.

### Basic Usage

```markup
<!-- Example of using a material icon -->
<cf-icon iconName="favorite"></cf-icon>

<!-- Example of using a font awesome icon -->
<cf-icon iconName="fa-star"></cf-icon>
```

### Toggle Icon

app.html

```markup
<cf-icon iconName="fa-thumbs-o-up" [toggleIcon]="myToggle"></cf-icon>
```

app.ts

```typescript
myToggle = {
    name: "fa-thumbs-up",
    size: "24px",
    value:"Like"
}
```

### Properties and Styling

app.html

```markup
<cf-icon [properties]="myProperties" [styling]="myStyling"></cf-icon>
```

app.ts

```typescript
// Structure of the properties object passed to the component 
myProperties = {
    "display": boolean, // Default: True,
    "disable": boolean, // Default: False
    "iconName": string, // Default: 'Home'
    "size": string, // Default: '24px'
    "value": any //value emitted on click,
    "toggle": {
        "name": string,
        "size": string,
        "value":any
    }
}

// Structure of the styling object passed to the component 
myStyling = {

    // styling of the container surrounding the icon
    "container": {
            "dynamic class": function() -> string, //function that returns a string of the name of the class
            "class":string //name of the class specified in you scss/css file
        },

    // styling of the icon
    "icon": {
            "dynamic class": function() -> string, 
            "class": string ,
            "themeColor": string , // primary/accent/warn
        }

    // styling of the toggle icon if there is any specified same structure as that of the icon styling
    "toggleIcon": {
            "container": {},
            "icon": {}
        }
}
```

## Input Properties

|    Attr    |   Type  | Details                                                                                              |
| :--------: | :-----: | ---------------------------------------------------------------------------------------------------- |
|   display  | boolean | If true, the icon will be displayed else the icon will be hidden. By default it's  value is **true** |
|   disable  | boolean | If true the icon with be disabled. By default it's value is **false**                                |
|  iconName  |  string | To specify the name of the material or font awesome icon                                             |
|    size    |  string | Size of the icon in *px*, *%* depending on what the user passes                                      |
|    value   |   any   | Value emitted on click                                                                               |
| toggleIcon |   any   | Object with 3 attributes : name, size, and value. It is activated when the icon is clicked           |
