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

<!-- 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

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

app.ts

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

Properties and Styling

app.html

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

app.ts

// 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