Skip to content

10 Icons

Jump to bottom
CraigD edited this page May 8, 2024 · 2 revisions

Material tries to map certain images from plugins into monochrome SVG icons. This helps them appear more Material-like, and also allows them to be recoloured - so you get light icons with dark themes, and dark icons with light themes.

To aid with this, Material itself has a JSON file containing some hard-coded mappings. The problem with this is that it needs to be updated for any new plugins, or mappings.

With the help of 'expectingtofly' (the BBC Sounds plugin author), plugin's can provide this mapping to Material. Therefore, Material itself does not need to update its icon mapping for each new plugin. There are 3 methods to achieve this:

To get Material to use one the icons from the Material Icons Font, you should name an icon using: <any string>_MTL_icon_<name of Material icon>.png - e.g. live_feeds_MTL_icon_radio.png will cause Material to use the radio icon from the Material Icon font.

To get Material to use one of its bundled SVG icons, you should name an icon using: <any string>_MTL_svg_<name of Material SVG icon>.png - e.g. live_feeds_MTL_svg_artist.png will cause Material to use its artist.svg icon.

If you want to bundle an SVG icon with your plugin, and have Material use this instead of your PNG file, the PNG file should be named <any string>_svg.png e.g. PluginNameLogo_svg.png will cause Material to use PluginNameLogo.svg from within the plugin itself. If using this method, all fill and stroke colours should be set to #000 - when the Material Perl code reads the file, it will replace all #000 strings with the desired colour.

NOTE: If you change the name of your plugin's icon (e.g. MyPlugin.png to MyPlugin_svg.png) then please ensure you also update your plugin's install.xml file to reference this new name.

Icons from 'Extras' pages

If your plugin has a HTML page shown in the 'Extras' setting, then the handling is slightly different. Plugins need to make trhe following changes (for plugin specific icons):

  1. Change cdimage='icon.gif' to cmdimage='icon.gif?svg=PluginName' - e.g. cmdimage='dplc_export.gif' to cmdimage='dplc_export.gif?svg=DynamicPlaylistCreator'
  2. SVG icon should have same basename as GIF (or PNG) but with an .svg extension, and be placed into HTML/EN/plugins/PluginName/html/images/ - e.g. HTML/EN/plugins/DynamicPlaylistCreator/html/images/dplc_export.svg

All other skins will ignore the ?svg=PluginName parameter, but Material will look for this to know that it should re-map the icon. The SVG icon needs to be within HTML/EN/plugins/PluginName/html/images/ so that Material can locate the correct icon.

SVG Files

  • Size: 24px x 24px, with at least a 2px border.
  • Colours: All fills, strokes, etc. should use colour "#000". Material will read the SVG file and replace this with a white-ish colour for dark themes, and a black-ish colour for light themes.
  • Optimisations: 'scour` should be used reduce the size of SVGs (especially if saved via inkscape) - e.g.
scour -i input.svg -o output.svg
Clone this wiki locally