Customize icons in the widget selector

Overview

You control the icons that are displayed with each widget in the widget selector, using the following widget properties:

  • IconName
    Holds the name of the icon that you can choose from a list of icons provided by Sitefinity.
    For example, IconName=”document”
  • IconUlrl
    Using this property, you can provide a link to a custom image that you have downloaded.
    For example, IconUrl=”/airplane.svg”

NOTE: If you have both properties configured for a widget, the IconUrl property takes precedence over IconName property.

Configure the icon of a custom widget

Perform the following:

  1. Download the image that you want to use as an icon.

    NOTE: The image must comply with the icon image requirements, listed below.

  2. Upload the image in the wwwroot folder of your project.
  3. Edit the ViewComponent of the widget by adding the link to the image in the following way:

  4. Save your changes and build your solution.

Icon image requirements

The image that you want to use as custom widget icon must comply with the following:

  • Be an SVG image format
  • Be a monotone image
  • Be 16x16, 24x24, or 40x40 pixels

List of Sitefinity widget icons

You use the IconName property with the predefined icons provided by Sitefinity.

You can find the list in Icons » Editors Widgets Icons.

Change the icon of a built-in widget

You must override the default widget and then you can change the icon in the same way as for custom widgets.

The following sample displays the IconName property added to the Document list widget:

For more information, see Extend the built-in widgets.


 

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?