Symbols

All symbols can be used in various places on the visualization. This makes it possible to define them as a variable or text.

To display a symbol on the visualization, it is declared directly in the text using the tag [icon:SYMBOLPATH]. The symbol path can be copied from the symbol library using the right mouse button or with CTRL+C. If possible, only Material Symbols should be chosen to keep the style of the visualization consistent.

Symbol Library

All available symbols can be accessed and searched under the context menu Visualization ▸ Symbols. It is also possible to import your own symbol set into the library. The procedure is explained further below.

Notes: The name displayed in the symbol list is not identical to the symbol path. If no symbol set is specified in the path, the Glyphicons set will be used automatically.

The filter in the symbol library also searches for stored tags. If this behavior is not desired, the filter can start with an = to search only in the names.

Material Symbols Icon Set (Standard)

This icon set is completely dynamic and the style of the symbols is automatically configured according to the design of the visualization. In addition, a filled symbol is automatically used when the symbol should be active. However, not every symbol has a filled variant.

The symbols are automatically rounded if the button radius is greater than or equal to 16 pixels. If the radius is equal to 0px, the sharp symbols are used. In the editor, however, the normal symbols are always used.

Note: It is recommended to use the "Material Symbols" icon set to design the visualization uniformly.

Material Animated Icon Set

There are selected Material Symbols that have been animated to represent values. These symbols only have one animation with the symbol of the structure. When selected, further variables are unlocked.

Philips Hue Icon Set

The symbols from Philips Hue can be used freely if the Hue interface is used. In addition, there is an additional Hue icon set from the Home Assistant HASS community. Further information can be found at the end of this chapter.

Weather Icon Set

This icon set displays the weather symbols of the visualization. These are seamlessly supported by various interfaces. See the following chapter Weather Icons.

Legacy (Deprecated) Icon Set

The Legacy icon set includes all symbols from the old visualization. The display style of the new surface remains the same. The symbols should no longer be used as they were not optimized for the new surface.

Various old symbols are still animated:

  • legacy/door
  • legacy/door_2
  • legacy/lock
  • legacy/shutter
  • legacy/shutter_blinds
  • legacy/window
  • legacy/window_tilt

Hidden Symbols

There are also hidden symbols for the visualization. These are explained further in the following chapters.

Only a URL prefix is required to call up the symbols.

Custom Icon Sets

It is possible to import your own icon set into the project. Every icon set must be prepared as a ZIP file. Some sample data can be downloaded here:

Pro Tip: After a successful import, you can export the icon set as .antobj to simplify the import. To do this, right-click on an icon set and select Export.

The following rules define the structure and requirements of an icon set. Please read them carefully and follow them exactly.

Rules

  • Prefix
    • May only contain _, a–z and 0–9.
    • Uppercase letters are automatically converted to lowercase.
    • Reserved names such as sys, src or doc are invalid.
    • Must begin with a letter (a–z). Only numbers are not allowed.
    • Trailing underscores (_) are removed.
    • Must be at least 3 characters long.
    • Multiple underscores (__) are reduced to a single one.
  • Symbol Names
    • Are automatically converted to lowercase.
    • Allowed characters are -, _, a–z and 0–9.
    • Long names and prefixes should be avoided.
    • A prefix must be unique and should only be used once.
    • If a symbol has the same name and prefix as a system symbol, it can replace it.
  • File Restrictions
    • Maximum file size after cleaning: 10 kB. Larger files are rejected.
    • SVG files must be cleaned:
      • Line breaks are automatically removed.
      • The following elements are deleted: <title>, <desc>, <script>, <image>, <style>, <foreignObject>.
      • The following attributes are deleted: style, fill, stroke, color, stop-color, flood-color, lighting-color.
      • Icons with embedded scripts, images, CSS or external resources are rejected.
      • If styles contain colors or style blocks, the import may also be rejected.
  • SVG Header Requirements
    • Must contain: viewBox, width and height. Missing values are automatically supplemented if possible.
    • Must contain the namespace: xmlns="http://www.w3.org/2000/svg". If it is missing or incorrect, it will be added automatically.
    • The icon name must exactly match the dimensions, otherwise the icon will be rejected.
    • The dimensions must be square (width = height). Default: 24px.
    • Contradictory styles or mismatched dimensions should be avoided.
  • General
    • Poorly created icons can significantly slow down the display or even cause errors.
    • Be sure to pay attention to the copyright of the symbols.
    • All vectors are rounded to three decimal places.

Structure

  • The file iconset.ini is mandatory to recognize the icon set.
    • It can be located in the root directory of the ZIP file or in a subfolder.
    • Must be in lowercase (iconset.ini).
    • Icon filenames themselves are not case-sensitive.
  • The import does not automatically search for SVG files.
    • The icon folder must be explicitly defined in iconset.ini (case sensitivity).
    • A folder named icons/ was defined in the ZIP file template.
  • Subfolders
    • Subfolders in the defined folder (icons/) serve as categories.
    • Symbol names must be unique across all categories.
    • Naming rules in the icon folder:
      • Minimum: Only dimension and file extension (e.g. 24.svg).
      • Variants such as filled24.svg or round_filled_24.svg are valid.
      • Filenames with multiple numbers (e.g. 24_48.svg) are invalid.
      • Style variants are recognized by:
        • Filled: Must contain filled or fill.
        • Round: Must contain round.
        • Sharp: Must contain sharp.
        • Round and sharp cannot be combined with each other.
      • If multiple rules apply, the last recognized file is used (the selection may appear random).
  • Further Rules
    • No nested sub-subfolders are searched (these can be used for backups or originals).
    • Files without .svg are ignored.
    • A file named tags.txt can be located in an icon folder to add additional search tags.
      • Tags can be separated by ,, ; or line breaks.

Special Icon Sets

There are also various special icon sets that can be imported like custom icon sets but do not need to be configured according to the above specifications.

Hass Hue Icons

One of them is from the Gibhub page hass-hue-icons. This is an additional Hue icon set from the Home Assistant HASS community and may only be used for non-commercial projects as it is under the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International license. Therefore, the icon set is not included with Antcas Control. However, the symbols can be imported into the project at any time using the ZIP file hass-hue-icons-main.zip as a new icon set. Please note the license terms of the project on the Github website.

Source: https://github.com/arallsopp/hass-hue-icons.

Material Design Icons by Pictogrammers

Another one is from Pictogrammers. For this, the file mdi-###.json must be packed into a ZIP file and imported. The file can be found in the browser's developer console and downloaded. An attempt is made to combine the outline symbols with the filled ones. The library is almost identical to Material Symbols. However, there are many community extensions. If you would like to integrate other icon sets into the library, please feel free to contact us.

Source: https://pictogrammers.com/library/mdi/

Subordinate Pages