The Icomoon icon picker allows you to use an Icomoon project to create your own icons and import them into Umbraco via a custom Property Editor. This package gives the content editor complete control over which icons can be used on their website and select them themselves.
The Icomoon icon picker requires you to set up an Icomoon account.
The Icomoon icon picker is available via NuGet.
Installing the Icomoon icon picker is quick and easy, just install the NuGet package and follow these steps:
- Go to the backoffice and create a new Data Type.
- There should be a new Property Type called
Icomoon icon picker. - Select this new Property Type and enter the name and code of your Icomoon project (these can be found here in the url shown under Development Links and Production Links. The code is the part after
publicin the URL). - Save the Property Type. It is now available to use in any Document Type you want!
After creating the DataType and adding it to a Document Type the icon can be selected by the content editor like this:
After selecting an icon the model will now contain a string with the correct value.
Assuming the value in your model is called Icon the icon can be used as shown below.
<svg class="icon @Icon">
<use xlink:href="#@Icon"></use>
</svg>
This functionality is great to use for things like nested content too, in the following image the Icomoon icon picker is used in some nested content. This gives the content editor a lot of variety!
Created by Infocaster
Made with contributors-img.
