Module which extends EPiServer edit mode by adding possibility to select icons (i.e. Font Awesome, Materialize, CSS.gg etc.) using dropdown.

1. Create model class which will represent icon:

public class CustomIconSelectItem : IconSelectItem
{
    public override string ToHtmlString()
    {
        (...)
    }
}

Here we can specify:

• Id: Unique id of an icon - this value will be stored in DB.
• Name: Friendly name which can be used during filtering.
• KeyWords: Keyword which can be used during filtering.

2. Create IconSelectionFactory which will return all available icons:

public class CustomIconSelectionFactory : IconSelectionFactory
{
    public override IEnumerable<IconSelectItem> GetIcons(ExtendedMetadata metadata)
    {
        (...)
    }
}

3. Create property attribute:

public class SelectCustomIconAttribute : SelectIconAttribute
{
    public SelectCustomIconAttribute()
    {
        this.SelectionFactoryType = typeof(CustomIconSelectionFactory);
        this.IconsPerRow = 5;
    }
}

Here we can specify:

• IconsPerRow: how many icons should be displayed in a row.
• RequireClientResources: additional resources which should be loaded with widget (i.e. css with icons).
• Filterable: possibility to filter icons by name or keywords.
• SelectionFactoryType: Our factory created in 2.

4. Decorate EPiServer content model property using created custom attribute:

[ContentType(DisplayName = "Custom Content Block", GUID = "d1216b39-21ce-4873-a8c1-c3d5db2b9285")]
public class CustomContentBlock : BlockData
{
    [SelectCustomIcon]
    public virtual string Icon { get; set; }
}