1 of 1

Icon

Icon component for Universal Dashboard

FontAwesome icons to include in your dashboard. Icon names are slightly different than those shown on the FontAwesome website. For example, if you want to use the network-wired icon, you would use the following string.

New-UDIcon -Icon 'NetworkWired'

Finding an Icon

We include FontAwesome v6 with PowerShell Universal. You can use Find-UDIcon to search through the list of included icons.

Find-UDIcon User

The UniversalDashboard.FontAwesomeIcons enum should not be used and is only included for backwards compatibility. Many of the icons are no longer a part of FontAwesome 6.

Icon

Create icons by specifying their names. You can use the icon reference below to find icons.

New-UDIcon -Icon 'AddressBook'

Size

Set the size of the icon. Valid values are: xs, sm, lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x

    New-UDIcon -Icon 'AddressBook' -Size 'sm'
    New-UDIcon -Icon 'AddressBook' -Size 'lg'
    New-UDIcon -Icon 'AddressBook' -Size '5x'
    New-UDIcon -Icon 'AddressBook' -Size '10x'

Rotation

Rotate icons. The value represents the degrees of rotation.

New-UDIcon -Icon 'AddressBook' -Size '5x' -Rotation 90

Border

Add a border to your icon.

New-UDIcon -Icon 'AddressBook' -Size '5x' -Border

Style

Apply CSS styles to your icon.

New-UDIcon -Icon 'AddressBook' -Size '5x' -Style @{
    backgroundColor = "red"
}

Visually Search for Icons

New-UDTextbox -Id 'txtIconSearch' -Label 'Search' 
New-UDButton -Text 'Search' -OnClick {
    Sync-UDElement -Id 'icons'
}

New-UDElement -tag 'p' -Content {}

New-UDDynamic -Id 'icons' -Content {
    $IconSearch = (Get-UDElement -Id 'txtIconSearch').value
    if ($null -ne $IconSearch -and $IconSearch -ne '')
    {
        $Icons =$Icons = Find-UDIcon -Name $IconSearch
    }

    foreach($icon in $icons) {
        try{
            New-UDChip -Label $icon -Icon (New-UDIcon -Icon $icon)
        }
        catch{
            New-UDChip -Label "$icon Unknown" 
        }
    }
}

Complete Icon List

 https://github.com/FortAwesome/Font-Awesome/blob/6.x/metadata/icons.json

Custom Icons

You can use custom icon sets available on the PowerShell Universal Modules page. First, install the module and then use the icon with other components.

Install-Module Universal.Icons.Tabler

Within your dashboard, call the icon cmdlet.

New-UDButton -Icon (New-UDTablerIcon -Icon "Tb3DRotate")

API

New-UDIcon

Icon

Icon component for Universal Dashboard

New-UDIcon -Icon 'NetworkWired'

Finding an Icon

We include FontAwesome v6 with PowerShell Universal. You can use Find-UDIcon to search through the list of included icons.

Find-UDIcon User

The UniversalDashboard.FontAwesomeIcons enum should not be used and is only included for backwards compatibility. Many of the icons are no longer a part of FontAwesome 6.

Icon

Create icons by specifying their names. You can use the icon reference below to find icons.

New-UDIcon -Icon 'AddressBook'

Size

Set the size of the icon. Valid values are: xs, sm, lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x

    New-UDIcon -Icon 'AddressBook' -Size 'sm'
    New-UDIcon -Icon 'AddressBook' -Size 'lg'
    New-UDIcon -Icon 'AddressBook' -Size '5x'
    New-UDIcon -Icon 'AddressBook' -Size '10x'

Rotation

Rotate icons. The value represents the degrees of rotation.

New-UDIcon -Icon 'AddressBook' -Size '5x' -Rotation 90

Border

Add a border to your icon.

New-UDIcon -Icon 'AddressBook' -Size '5x' -Border

Style

Apply CSS styles to your icon.

New-UDIcon -Icon 'AddressBook' -Size '5x' -Style @{
    backgroundColor = "red"
}

Visually Search for Icons

New-UDTextbox -Id 'txtIconSearch' -Label 'Search' 
New-UDButton -Text 'Search' -OnClick {
    Sync-UDElement -Id 'icons'
}

New-UDElement -tag 'p' -Content {}

New-UDDynamic -Id 'icons' -Content {
    $IconSearch = (Get-UDElement -Id 'txtIconSearch').value
    if ($null -ne $IconSearch -and $IconSearch -ne '')
    {
        $Icons =$Icons = Find-UDIcon -Name $IconSearch
    }

    foreach($icon in $icons) {
        try{
            New-UDChip -Label $icon -Icon (New-UDIcon -Icon $icon)
        }
        catch{
            New-UDChip -Label "$icon Unknown" 
        }
    }
}

Complete Icon List

 https://github.com/FortAwesome/Font-Awesome/blob/6.x/metadata/icons.json

Custom Icons

You can use custom icon sets available on the PowerShell Universal Modules page. First, install the module and then use the icon with other components.

Install-Module Universal.Icons.Tabler

Within your dashboard, call the icon cmdlet.

New-UDButton -Icon (New-UDTablerIcon -Icon "Tb3DRotate")

API

New-UDIcon