Open Icon

About

#

In web app development, it is very common that developers will use open-source icon packs in their web app. However, there is no convenient integration to the Unreal Engine (UE) world.

To use open source icon packs in UE, you have to: Download each icon as png and import it to UE as texture. Download the font file and import it to UE, and treat it as text. Then try to find and copy-paste the UNICODE of each icon.

Both are very inconvenient, so I made this plugin for you! With the help of this plugin, all you need is click the one you like in the detail panel inside the “Open Icon” widget! This plugin provides two custom widgets inherited from TextBlock with specialized “detail panel customization” to allow you preview all the available icons and choose anyone by simply clicking the one you like. The “OpenIcon” widget includes 6 open-source icon packs for you, including FontAwesome, Nerd font, ForkAwesome, Material Design, FontAudio, and KenneyIcons. If these icons are not enough, you can use “CustomIcon” to include any font-based icon you own.

Basic Video Tutorial

#

Install

#

Download it. Enable it in your project.

Simple Usage

#

Just add “OpenIcon” to your UMG, and you can choose which icon you want!

You can also adjust its appearance like a text block.

Use in blueprint

#

If you want to change the icon according to your game logic, the “Set Icon by ID” is at your service.

You can copy the icon ID through the icon gallery widget.

To change its appearance at run time, just use the “TextBlock” way. This widget is basically a simple TextBlock!

Custom icon

#

If you want to use some other font-based icon packs, the custom icon pack is at your service. You’ll need to prepare your icon pack, and the icon data.

Checkout this video tutorial for detailed instructions:

Helper widgets

#

There are two helper widgets provided: Icon Gallery and Texture Generator.

Where they are?

#

You can find the helper widgets in Window → Open Icon Helpers

or in your UMG Editor

Icon Gallery

#

You can switch to Custom Icon Gallery with the top-right button. Three Copy Mode is provided to change what to copy when clicking on any icon here.

1. ID: for SetIconByID or TextureGenerator, it is basically the row name of the icon data table.
2. Unicode: for TextBlock
3. Unicode with tag. You can use it for rich text block. A RichTextStyle table is included in this plugin for you. Checkout RichTextBlock if you are not familiar with it. The sample RichText data table is also included in this plugin, you can just modify it for your needs. (OpenIcon/Content/Data/DT_RichIconText_Sample)

Copy unicode with tag and use in rich text block.

Texture Generator

#

The most universal format for icons in UE is Texture, so I created this helper widget that lets you easily convert anyone you want to texture!

Patch notes

#

• V1.6 (Jun 17, 2024)
  • rewrite helper widgets in c++ and change to list view / tile view to boost performance
• V1.5 (May 25, 2024)
  • Minor bug fix
  • Add gallery icon size to plugin settings
• V1.4 (Nov 25, 2023)
  • Add new icon source Nerd Font
• V1.3 (Jan 16, 2023)
  • Add linux support
  • Merge open icon gallery and custom icon gallery and provide 3 ways to copy icon data. (row id, unicode, and unicode with tag)
• V1.2.2 (Nov 11, 2022)
  • Fix data disappears when use this plugin in cpp project. (This problem stems from the loading phase being not set properly. )
  • and other minor fixes …
• V1.2 (May 20, 2021)
  • Add custom icon support
• V1.1 (Apr 20, 2021)
  • Add Texture Generation helper widget
• V1.0 (Apr 8, 2021)
  • First release

Other topic

#

custom Icon creation

Tutorial