Adding custom icons

[yuri]

As of v9.1.

1. Find an icon you need on the website: https://icon-sets.iconify.design/. For a specific icon, select CSS. Copy the generated CSS code.

2. Create a file client/custom/my-icons.css and insert the generated CSS code into it:

.proicons--airplane {
  display: inline-block;
  width: 24px;
  height: 24px;
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.238 4.512a1.762 1.762 0 1 1 3.524 0V8.9l6.733 3.535a1 1 0 0 1 .535.885v.431a.6.6 0 0 1-.712.59l-6.556-1.24v4.107a.6.6 0 0 0 .317.53l1.862.996a1.5 1.5 0 0 1 .792 1.322v.447a.6.6 0 0 1-.73.586L12 20.204l-4.003.885a.6.6 0 0 1-.73-.586v-.447a1.5 1.5 0 0 1 .792-1.322l1.862-.997a.6.6 0 0 0 .317-.529v-4.106L3.682 14.34a.6.6 0 0 1-.712-.59v-.43a1 1 0 0 1 .535-.886L10.238 8.9z'/%3E%3C/svg%3E");
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

We assume we picked the proicons--airplane icon. The class name (without the dot character) will be used further.

3. Create a file custom/Espo/Custom/Resources/metadata/client.json:

{
    "cssList": [
        "__APPEND__",
        "client/custom/my-icons.css"
    ]
}

Note: "__APPEND__" is needed to be added as the first element of the array. It prevents the customization from overriding existing values.

4. Create a file custom/Espo/Custom/Resources/metadata/clientIcons.json:

{
    "classList": [
        "__APPEND__",
        "proicons--airplane"
    ]
}

5. Clear cache.

Now, the icon will be available in the picklist when you select an icon for an entity type or a navbar tab.