Icon
Icon component for Universal Dashboard
FontAwesome icons to include in your dashboard.
Icon
Create icons by specifying their names. You can use the icon reference below to find icons.
New-UDIcon -Icon 'address_book'
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 'address_book' -Size 'sm'
New-UDIcon -Icon 'address_book' -Size 'lg'
New-UDIcon -Icon 'address_book' -Size '5x'
New-UDIcon -Icon 'address_book' -Size '10x'
Rotation
Rotate icons. The value represents the degrees of rotation.
New-UDIcon -Icon 'address_book' -Size '5x' -Rotation 90
Border
Add a border to your icon.
New-UDIcon -Icon 'address_book' -Size '5x' -Border
Style
Apply CSS styles to your icon.
New-UDIcon -Icon 'address_book' -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 {
$Icons = [Enum]::GetNames([UniversalDashboard.Models.FontAwesomeIcons])
$IconSearch = (Get-UDElement -Id 'txtIconSearch').value
if ($null -ne $IconSearch -and $IconSearch -ne '')
{
$Icons = $Icons.where({ $_ -match $IconSearch})
}
foreach($icon in $icons) {
New-UDIcon -Icon $icon -Size lg
}
}
Parameters
New-UDIcon