# Customize icons paella-core and its plugins use icons in various parts. To customize them there are special APIs that allow you to replace a predefined icon with a different one. It is important to note that not all icons will be customizable. To change the icon of, for example, a third-party plugin, the plugin developer has had to integrate those customization APIs into their plugin. In addition, the plugin developer must also have specified the customization data for their icons. In this chapter we will see how `paella-core` uses the icons and what is the method to replace them, when possible. ## Icons in `paella-core` `paella-core` utiliza el exclusivamente el formato `svg` vectorial para los iconos. Cuando se utiliza un icono, en lugar de insertar la imagen con una etiqueta `` o definirla como imagen de fondo, `paella-core` inserta el código XML del icono directamente en el árbol DOM. Esto permite definir el color del icono utilizando CSS. For this reason, to change the color of the icons, it is not necessary to change the icon itself, but just change CSS properties. The easiest way is to change the `--main-fg-color` variable, as described in [the tutorial on customizing colors](customize_colors.md). But we can also modify the styles so that the icons use another color: ```css /* Customize icon color in playback bar: */ .playback-bar .button-plugins button i svg { fill: green; color: green; } /* Customize icon color in button groups */ .button-group button i svg { fill: green; color: green; } /* Customize icon color video canvas */ .video-canvas .button-area button i svg { fill: green; color: green; } ``` Of course, you can also change other icon properties: ```css .playback-bar .button-plugins button i svg { fill: black; color: black; background-color: white; padding: 1px; border-radius: 3px; } ``` Note that for these properties to work, the colors of the elements within the SVG file have to be defined at the root tag level of the SVG file. Therefore, the official recommendation is that SVG icons should not have color properties defined internally, so that the style colors can be used. In the following icon, the root tag has a fill-color definition in the style. Therefore, this icon will not be affected by the `paella-core` style definitions. If we want to use the colors in the style, it is important to remove all these color and fill definitions. ```xml ... ``` However, sometimes you may want to keep certain colors. For example, to define flags. For these cases the icons must define the fill and color styles, and generally these definitions will be maintained in each of the icon elements: ```xml ... ``` ## Icon customization APIs If changing the color of an icon is not enough and it is necessary to replace it, `paella-core` provides an API to do this task. It is divided into two parts: ### API for plugin developers Allows to query if `paella-core` has a custom icon to use in the plugin. In this case, the plugin developer must use that icon instead of using the one that will be defined by default for his plugin. If the developer does not adapt the plugin to allow custom icons, then we can only modify it by extending the plugin in another class. This part will be developed in detail later, when we learn how to create our own plugins. For the moment you only need to know from this part that: - The plugin developer decides if he wants to integrate the icons with the customization APIs. - For each icon, the plugin developer has to define a unique identifier and specify it in the documentation. ### Icon definition API It is the API that allows to specify custom icons. To use it we need to know the identifier of the plugin that implements the icon, the icon identifier and an image in SVG format with the characteristics described at the beginning of this document. This information is usually included in the plugin documentation. For example, the following text is taken from the documentation of the `paella-basic-plugins` package, for the volume selector plugin: #### Icon customization data: - Plugin identifier: `es.upv.paella.volumeButtonPlugin` - Icon names: + `volumeHighIcon`: maximum volume level. + `volumeMidIcon`: medium volume level. + `volumeLowIcon`: low volume level. + `volumeMuteIcon`: muted volume. Create the following SVG files inside `public/icons` folder: **volume_high.svg** ```xml ``` **volume_mid.svg** ```xml ``` **volume_low.svg** ```xml ``` **volume_mute.svg** ```xml ``` In `main.js`, load the previous icons and use the plugin information to define the custom icons for the volume selector plugin. You can use the `utils.loadSvgIcon()` function from the `paella-core` utilities package to load the icons. ```js import { ... utils } from 'paella-core'; ... const [ volumeHigh, volumeMid, volumeLow, volumeMute ] = await Promise.all([ utils.loadSvgIcon('icons/volume_high.svg'), utils.loadSvgIcon('icons/volume_mid.svg'), utils.loadSvgIcon('icons/volume_low.svg'), utils.loadSvgIcon('icons/volume_mute.svg') ]); ... ``` Using the information in the `paella-basic-plugins` documentation, replace the plugin icons in the volume selector plugin using the `addCustomPluginIcon(pluginId,iconId,svgText)` api. This function must be called after executing `loadManifest()`: ```js ... await player.loadManifest(); // Always call addCustomPluginIcon() after loadManifest() player.addCustomPluginIcon('es.upv.paella.volumeButtonPlugin','volumeHighIcon',volumeHigh); player.addCustomPluginIcon('es.upv.paella.volumeButtonPlugin','volumeMidIcon',volumeMid); player.addCustomPluginIcon('es.upv.paella.volumeButtonPlugin','volumeLowIcon',volumeLow); player.addCustomPluginIcon('es.upv.paella.volumeButtonPlugin','volumeMuteIcon',volumeMute); ... ``` Previous tutorial: [Quality selector plugin](quality_selector.md) Next tutorial: [Video manifest: captions](video_manifest_captions.md)