Icons

Overview

Icons are widely used and supported in the editor.

• Content Type Icon
• Deliveries Icon
• Design Component Icon
• Main Navigation Icon
• User Menu Icon
• Text Formatting Toolbar Icon
• Icons in UI extensions

In every case mentioned before, you can set an icon of the supported li-icon collection. If your icon is not supported, you can register a material design icon.

Icon and Placeholder Collections

Livingdocs provides some icon collections, which you can use in your downstream.

• material design icon collection (get the SVG here: https://livingdocsio.github.io/material-design-icons-svg/svg/<icon-name>.svg
• design component icon collection (get the SVG here: https://livingdocsio.github.io/livingdocs-design-assets/docs/icons/component-icons/<icon-name>.svg)
• li-icon collection
  • this is a subset of the material design icons embedded into the core via identifier
  • the SVG path of the li icons list can be loaded via window.materialDesignIconsSvgPaths in the browser console of the editor

Register a Material Design Icon

The editor supports some material design icons by default (list of supported icons). If you want to use another icon from the material design icon collection, you can add the icons to the editor config.

// all.js
{
  customIconNames: ['abugida-devanagari'],
}

Icons in UI Extensions

If you develop an UI extensions like an include, a metadata component or a component sidebar, you can embed icons from the li-icon collection like this:

<li-icon name="arrow arrow--right" class="li-icon li-icon--small"></li-icon>

Another option is to embed your SVG directly in the html:

<div class="li-icon li-icon--default">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#6e6e6e">
		<path d="M13,13H11V7H13M13,17H11V15H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
	</svg>
</div>