Icons

Introduction

In this tutorial you will learn how to use Icons widget in Supervisely app.

Function signature

Icons(class_name=None, color=None, bg_color=None, rounded=False, image_url=None, widget_id=None)

icons_default

Parameters

Parameters	Type	Description
class_name	str	Icon class name (e.g "zmdi zmdi-image-o")
color	str	Icon color
bg_color	str	Icon background color
rounded	bool	Round icon
image_url	str	Icon image url
widget_id	str	Id of the widget

class_name

Determines icon class name. Icons can be found at zavoloklom.github.io.

type: str

default value: None

icon = Icons(class_name="zmdi zmdi-bike")

class_name

color

Determines icon color.

type: str

default value: None

icon = Icons(class_name="zmdi zmdi-bike", color="#000000")

color

bg_color

Determines icon background color.

type: str

default value: None

icon = Icons(class_name="zmdi zmdi-bike", bg_color="#000000")

bg_color

rounded

Round icon.

type: bool

default value: False

icon = Icons(class_name="zmdi zmdi-bike", rounded=True)

rounded

image_url

Icon image url.

type: str

default value: None

icon = Icons(image_url="https://i.imgur.com/0E8d8bB.png")

image_url

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
set_class_name(value: str)	Set Icons class name.
get_class_name()	Return Icons class name.
set_color(value: str)	Set Icons color.
get_color()	Return Icons color.
set_bg_color(value: str)	Set Icons background color.
get_bg_color()	Return Icons background color.
set_rounded()	Set Icons round.
set_standart()	Set Icons standart.
get_rouded()	Check Icons round or not.
set_image_url(value: str)	Set Icons image url.
get_image_url()	Return Icons image url.

Mini App Example

You can find this example in our Github repository:

supervisely-ecosystem/ui-widgets-demos/media/008_icons/src/main.py

Import libraries

import os

from dotenv import load_dotenv
import supervisely as sly
from supervisely.app.widgets import Button, Card, Container, Icons

Initialize Button we will use

button_url = Button("Set url")
button_round = Button("Round icon")
button_standart = Button("Standart icon")
button_add_bg = Button("Add bg")
button_start = Button("Start icon")
btn_container = Container(
    [button_round, button_standart, button_add_bg, button_url, button_start], direction="horizontal"
)

Initialize Icons widget

icon_name = "zmdi zmdi-car-taxi"
icon = Icons(class_name=icon_name)

Create app layout

Prepare a layout for app using Card widget with the content parameter and place widget that we've just created in the Container widget.

card = Card(
    title="Icons",
    content=Container([icon, btn_container]),
)

layout = Container(widgets=[card])

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)

Add functions to control widget from python code

@button_url.click
def set_url():
    icon.set_image_url("https://i.imgur.com/0E8d8bB.png")


@button_round.click
def set_round():
    icon.set_rounded()


@button_standart.click
def set_standart():
    icon.set_standart()


@button_add_bg.click
def set_bg():
    icon.set_bg_color("#000000")


@button_start.click
def start():
    icon.set_image_url("")
    icon.set_standart()
    icon.set_bg_color("")
    icon.set_class_name(icon_name)

layout