IconProps

Interface

Properties for icon. There are three kinds of icons:

  1. Default icons (Icons provided by General group and Arrows group)
  2. Custom icons (Additional icons configured by developers, showed in My icons group)
  3. Uploaded icons (Additional icons uploaded by users, showed in My icons group)

Properties

PropertyTypeNotes
string

Default icons and Custom icons use this property as icon button title. So Custom icons need to pass a nls string. Uploaded icons save this property in appResourceUrl as portal filename, eg.'1678960963547.png'

boolean

For Default icons, this property is true. For Custom icons, this property is true if the svg is a inline svg file string; this property is false if the svg is a url of an image. For Uploaded icons, this property is false(Because we don't support to upload a svg file). If this property is false, the icon cannot change color.

string

Default icons and Custom icons use this property to tell icon button whether it is active. For Custom Icon that doesn't set originalName, will compare svg string. Uploaded icons use this property as icon button title. eg.'apple.png'

string | string[]

Used to decide if the default icon exist and set the selected icon when opening the icon picker pane. For Default icons, it is a string[] showing its group, eg. ['general', 'search']. For Custom icons, it is a string that stands for a specific icon. The svg string will be compared when no path set. For Uploaded icons, it is an appResourceUrl string from appConfig. eg.${appResourceUrl}/images/icon_picker_in_setting/1678960963547.png

filename

Interface Property
filename: string

Default icons and Custom icons use this property as icon button title. So Custom icons need to pass a nls string. Uploaded icons save this property in appResourceUrl as portal filename, eg.'1678960963547.png'

inlineSvg

optional
Interface Property
inlineSvg: boolean

For Default icons, this property is true. For Custom icons, this property is true if the svg is a inline svg file string; this property is false if the svg is a url of an image. For Uploaded icons, this property is false(Because we don't support to upload a svg file). If this property is false, the icon cannot change color.

originalName

optional
Interface Property
originalName: string

Default icons and Custom icons use this property to tell icon button whether it is active. For Custom Icon that doesn't set originalName, will compare svg string. Uploaded icons use this property as icon button title. eg.'apple.png'

path

optional
Interface Property
path: string | string[]

Used to decide if the default icon exist and set the selected icon when opening the icon picker pane. For Default icons, it is a string[] showing its group, eg. ['general', 'search']. For Custom icons, it is a string that stands for a specific icon. The svg string will be compared when no path set. For Uploaded icons, it is an appResourceUrl string from appConfig. eg.${appResourceUrl}/images/icon_picker_in_setting/1678960963547.png

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.