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.
1
New-UDIcon -Icon 'NetworkWired'
Copied!

Icon

Create icons by specifying their names. You can use the icon reference below to find icons.
1
New-UDIcon -Icon 'AddressBook'
Copied!

Size

Set the size of the icon. Valid values are: xs, sm, lg, 2x, 3x, 4x, 5x, 6x, 7x, 8x, 9x, 10x
1
New-UDIcon -Icon 'AddressBook' -Size 'sm'
2
New-UDIcon -Icon 'AddressBook' -Size 'lg'
3
New-UDIcon -Icon 'AddressBook' -Size '5x'
4
New-UDIcon -Icon 'AddressBook' -Size '10x'
Copied!

Rotation

Rotate icons. The value represents the degrees of rotation.
1
New-UDIcon -Icon 'AddressBook' -Size '5x' -Rotation 90
Copied!

Border

Add a border to your icon.
1
New-UDIcon -Icon 'AddressBook' -Size '5x' -Border
Copied!

Style

Apply CSS styles to your icon.
1
New-UDIcon -Icon 'AddressBook' -Size '5x' -Style @{
2
backgroundColor = "red"
3
}
Copied!

Visually Search for Icons

1
New-UDTextbox -Id 'txtIconSearch' -Label 'Search'
2
New-UDButton -Text 'Search' -OnClick {
3
Sync-UDElement -Id 'icons'
4
}
5
6
New-UDElement -tag 'p' -Content {}
7
8
New-UDDynamic -Id 'icons' -Content {
9
$Icons = [Enum]::GetNames([UniversalDashboard.Models.FontAwesomeIcons])
10
$IconSearch = (Get-UDElement -Id 'txtIconSearch').value
11
if ($null -ne $IconSearch -and $IconSearch -ne '')
12
{
13
$Icons = $Icons.where({ $_ -match $IconSearch})
14
}
15
16
foreach($icon in $icons) {
17
New-UDIcon -Icon $icon -Size lg
18
}
19
}
Copied!

Parameters

New-UDIcon
Name
Type
Description
Required
Id
string
Id of the icon
false
Icon
FontAwesomeIcons
Icon to select
false
FixedWidth
switch
false
Inverse
switch
Whether to inverse the icon
false
Rotation
int
Rotates an icon clockwise based on the degrees specified
false
ClassName
string
false
Transform
string
false
Flip
string
false
Pull
string
false
ListItem
switch
false
Spin
switch
Caues the icon to spin.
false
Border
switch
Adds a border to the icon.
false
Pulse
switch
false
Size
string
The size of the icon
false
Style
hashtable
A CSS style to apply to the icon.
false
Title
string
false
Regular
switch
false
Color
Last modified 3d ago