Skip to main content
VESDK/Flutter/Guides/User Interface

Customize Icons

Customize user interface icons

VideoEditor SDK for Flutter provides full control over all icons used inside the editor. However, exchanging the icons needs to be implemented natively for each of the platforms.

iOS#

In order to exchange icons in the editor on iOS, you need to provide an image block that is available natively for the VESDK class:

First, you need to import the ImglyKit module inside your AppDelegat.swift file:

import ImglyKit

Then, you can set the image block before the editor is opened. We recommend placing the code inside the didFinishLaunchingWithOptions function in the same file.

VESDK.bundleImageBlock = { identifier in
if identifier == "imgly_icon_save" {
return UIImage(named: "imgly_icon_approve_44pt")
}
return nil
}

For further information, please have a look at our native guides

Android#

For Android, you will need to create custom resource files for the corresponding icons of the SDK. Simply provide a resource file with the same filename as used in the SDK. You can find all available resources inside our demo repository. For further information, please have a look at our native guides

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="24"
android:viewportHeight="24"
android:width="24dp"
android:height="24dp">
<path
android:pathData="M20.999994 7l-1.4 -1.4 -10.6000001 10.6 -4.2 -4.2 -1.4 1.4 5.6 5.6z"
android:fillColor="?attr/imgly_icon_color_secondary" />
</vector>