Before PSU 3.9.0 using new-udbutton -icon and picking a free fontawsome icon works but with 3.9.0 we cannot use fontawsome free icons with the button

Can you share the code you used to generate this error?

i have a custom button component and i have notice it was using the following

param(
[Parameter()]
[string]$Id = ([Guid]::NewGuid()),
[Parameter()]
$Text,
[Parameter()]
[Switch]$isLoading,
[Parameter()]
[UniversalDashboard.Models.FontAwesomeIcons]$Icon,
[Parameter()]
[ValidateSet(‘left’, ‘right’)]
[String]$IconAlignment = ‘left’,
[Parameter()]
[Endpoint]$OnClick,
[Parameter()]
[String]$BackgroundColor,
[Parameter()]
[string]$loaderType,
[Parameter()]
[Switch]$Disabled
)

if ($OnClick) {
    $OnClick.Register($Id + 'onClick', $PSCmdlet)
}
    

if ($PSBoundParameters.ContainsKey("Icon")) {
    $IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)
}

can you kindly advice what change do i need to do in above code for this component to work with new udicon

thank you

even now if i try to use the free font awsome it works on the page icon but with my custom button component if i try the following which was working before.

New-UDButtonCustom -Text “Monitor” -Icon (New-UDIcon -Icon ‘AddressBook’) -IconAlignment left -BackgroundColor "#27B52B " -onClick { }

am getting a deferent error each time for example

Cannot process argument transformation on parameter ‘Icon’. Cannot create object of type “UniversalDashboard.Models.FontAwesomeIcons”. The property ‘border’ was not found for the ‘UniversalDashboard.Models.FontAwesomeIcons’ object. The settable properties are: [value__ <System.Int32>].

Don’t use the FontAwesomeIcons enum. Change the parameter to this if you are just going to be passing in an Icon via New-UDIcon

[Parameter()]
$Icon,

And then you can get rid of this.

if ($PSBoundParameters.ContainsKey("Icon")) {
    $IconName = [UniversalDashboard.Models.FontAwesomeIconsExtensions]::GetIconName($Icon)
}

Just pass $Icon to New-UDButton.

ill try and post back if there is still an issue.

i did try your idea but the icon is not showing and no error message.

can u kindly share the component and powershell function for new-udbutton so i can compare it with my custom component button since the icon works with new-udbutton component but no longer works with my custom button component.

Here is the button code.

function New-UDButton {
    <#
    .SYNOPSIS
    Buttons allow users to take actions, and make choices, with a single tap..
    
    .DESCRIPTION
    Creates a new button. Buttons allow users to take actions, and make choices, with a single tap.
    
    .PARAMETER Text
    The text to show within the button.
    
    .PARAMETER Icon
    An icon to show within the button. Use New-UDIcon to create an icon for this parameter. 
    
    .PARAMETER Variant
    The variant type for this button. Valid values are: "text", "outlined", "contained"
    
    .PARAMETER IconAlignment
    How to align the icon within the button. Valid values are: "left", "right"
    
    .PARAMETER FullWidth
    Whether the button takes the full width of the it's container.
    
    .PARAMETER OnClick
    The action to take when the button is clicked. 
    
    .PARAMETER Size
    The size of the button. Valid values are: "small", "medium", "large"
    
    .PARAMETER Style
    Styles to apply to the button. 
    
    .PARAMETER Href
    A URL that the user should be redirected to when clicking the button. 
    
    .PARAMETER Id
    The ID of the component. It defaults to a random GUID.

    .PARAMETER Color
    The color of the component. Valid values are: 'default', 'inherit', 'primary', 'secondary'

    .PARAMETER Disabled
    Whether the button is disabled. 

    .PARAMETER ClassName
    The CSS Class to apply to the button.

    .PARAMETER ShowLoading
    Displays a loading spinner while the OnClick event handler is running.

    .PARAMETER LoadingIndicator
    A custom element to display instead of the built in spinner for -ShowLoading

    .PARAMETER LoadingPosition
    The position of the loading indicator. Valid values are: 'start', 'end', 'center'
    
    .EXAMPLE
    PS > New-UDButton -Variant 'text' -Text 'Text' -Id 'button1'
    PS > New-UDButton -Variant 'contained' -Text 'Contained'  -Id 'button2'
    PS > New-UDButton -Variant 'outlined' -Text 'Outlined' -Id 'button3'

    Basic buttons|UDButton comes with three variants: text, contained, and outlined.

    .EXAMPLE 
    PS > New-UDButton -Text 'Click me' -OnClick {
    PS >   Show-UDToast -Message 'Hello, world!'
    PS > } -Id 'button4'

    Handling clicks|PowerShell that is executed when the button is clicked.

    .EXAMPLE 
    PS > New-UDButton -Text 'Secondary' -Color secondary -Id 'button5'
    PS > New-UDButton -Text 'Success' -Color success -Id 'button6'
    PS > New-UDButton -Text 'Error' -Color error -Id 'button7'

    Color|Adjust the button color with -Color

    .EXAMPLE 
	PS> New-UDButton -Variant 'text' -Text 'small' -Id 'button8' -Size small
	PS> New-UDButton -Variant 'text' -Text 'medium'  -Id 'button9' -Size medium
	PS> New-UDButton -Variant 'text' -Text 'large' -Id 'button10' -Size large
    PS> 
	PS> New-UDButton -Variant 'contained' -Text 'small' -Id 'button11'  -Size small
	PS> New-UDButton -Variant 'contained' -Text 'medium'  -Id 'button12'  -Size medium
	PS> New-UDButton -Variant 'contained' -Text 'large' -Id 'button13'  -Size large
    PS> 
	PS> New-UDButton -Variant 'outlined' -Text 'small' -Id 'button14'  -Size small
	PS> New-UDButton -Variant 'outlined' -Text 'medium'  -Id 'button15'  -Size medium
	PS> New-UDButton -Variant 'outlined' -Text 'large' -Id 'button16'  -Size large

    Sizes|For larger or smaller buttons, use the -Size parameter.

    .EXAMPLE 
    PS > New-UDButton -Icon (New-UDIcon -Icon 'User') -Text 'View User' -Id 'button17'

    Icon|Display an icon within the button

    .EXAMPLE 
    PS > New-UDButton -OnClick { Start-Sleep 3 } -ShowLoading -Text 'Load Data' -Id 'button18'

    Loading|Show a loading indicator while the OnClick event handler is running.
    #>
    [Component("Button", "Stop", "Creates a new button.")]
    param
    (
        [Parameter (Position = 0)]
        [string]$Text = "Button",

        [Parameter (Position = 1)]
        $Icon,

        [Parameter (Position = 2)]
        [ValidateSet("text", "outlined", "contained")]
        [string]$Variant = "contained",

        [Parameter (Position = 3)]
        [ValidateSet("left", "right")]
        [string]$IconAlignment = "left",

        [Parameter (Position = 6)]
        [switch]$FullWidth,

        [Parameter (Position = 7)]
        [Endpoint]$OnClick,

        [Parameter (Position = 8)]
        [ValidateSet("small", "medium", "large")]
        [string]$Size,

        [Parameter (Position = 9)]
        [Hashtable]$Style,

        [Parameter (Position = 10)]
        [string]$Href,

        [Parameter()]
        [string]$Id = ([Guid]::NewGuid()).ToString(),

        [Parameter()]
        [ValidateSet('default', 'inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning')]
        [string]$Color = 'primary',

        [Parameter()]
        [Switch]$Disabled,

        [Parameter()]
        [string]$ClassName,

        [Parameter()]
        [Switch]$ShowLoading,

        [Parameter()]
        [object]$LoadingIndicator,

        [Parameter()]
        [ValidateSet('center', 'start', 'end')]
        [string]$LoadingPosition = "center"

    )

    End {

        if ($OnClick) {
            $OnClick.Register($Id, $PSCmdlet)
        }

        if ($Color -eq 'default') {
            $Color = 'primary'
        }

        if ($Icon -is [string]) {
            $Icon = New-UDIcon -Icon $Icon
        }

        @{
            # Mandatory properties to load as plugin.
            type             = 'mu-button'
            isPlugin         = $true
            assetId          = $MUAssetId

            # Command properties.
            id               = $Id
            text             = $Text
            variant          = $Variant.ToLower()
            onClick          = $OnClick
            iconAlignment    = $IconAlignment
            disabled         = $Disabled.IsPresent
            icon             = $Icon
            fullWidth        = $FullWidth.IsPresent
            size             = $Size
            href             = $Href
            style            = $Style
            color            = if ($Color) { $Color.ToLower() } else { $null }
            className        = $ClassName
            showLoading      = $ShowLoading.IsPresent
            loadingIndicator = $LoadingIndicator
            loadingPosition  = $LoadingPosition.ToLower()
        }

    }
}

And here is the JS side of things.

import React from 'react'
import classNames from 'classnames'
import Button from '@mui/material/Button'
import LoadingButton from '@mui/lab/LoadingButton'
import UdMuIcon from './icon'
import { withComponentFeatures } from 'universal-dashboard'
import makeStyles from '@mui/styles/makeStyles';
import { useState } from 'react'

const useStyles = makeStyles(theme => ({
  button: {
    margin: theme.spacing(),
  },
  leftIcon: {
    marginRight: theme.spacing(),
  },
  rightIcon: {
    marginLeft: theme.spacing(),
  },
}))

const UdButton = props => {
  const classes = useStyles();
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    if (props.onClick == null) return
    setLoading(true);
    props.onClick().then(() => setLoading(false)).catch(() => setLoading(false));
  }

  var icon = props.icon ? (
    <UdMuIcon
      {...props.icon}
      style={
        props.text ? props.iconAlignment === 'left' ? { ...props.icon.style, marginRight: 8 } : { ...props.icon.style, marginLeft: 8 } : props.icon.style
      }
    />
  ) : null

  if (props.showLoading) {
    return <LoadingButton
      variant={props.variant}
      size={props.size}
      disabled={props.disabled}
      className={classNames(classes.button, 'ud-mu-button', props.className)}
      fullWidth={props.fullWidth}
      href={props.href}
      onClick={handleClick}
      style={{ ...props.style }}
      id={props.id}
      color={props.color}
      loading={loading}
      loadingIndicator={props.loadingIndicator && props.render(props.loadingIndicator)}
      loadingPosition={props.loadingPosition}
    >
      {props.iconAlignment === 'left' ? icon : null}
      {props.text}
      {props.iconAlignment === 'right' ? icon : null}
    </LoadingButton>
  }

  return (
    <Button
      variant={props.variant}
      size={props.size}
      disabled={props.disabled}
      className={classNames(classes.button, 'ud-mu-button', props.className)}
      fullWidth={props.fullWidth}
      href={props.href}
      onClick={handleClick}
      style={{ ...props.style }}
      id={props.id}
      color={props.color}
    >
      {props.iconAlignment === 'left' ? icon : null}
      {props.text}
      {props.iconAlignment === 'right' ? icon : null}
    </Button>
  )
}

export default withComponentFeatures(UdButton)

can you kindly post the button group JS component and script.

Thank you