correct way to add icon to menu bar

[foxesden]

I am trying to get my plugin's icon to display correctly on Material Skin. I can get it working on the "normal" web UI. Here are some code extracts. That I have tried having read various posts. The first one works on the normal UI.

Slim::Web::Pages->addPageLinks("icons", { $class->getDisplayName => '/plugins/SqueezeDSP/images/SqueezeDSP_300x300_f.png' });

#Slim::Web::Pages->addPageFunction("/plugins/SqueezeDSP/HTML/images/SqueezeDSP_300x300_f.png", \&handleWebStatic);
Slim::Plugin::OnlineLibrary::Plugin->addLibraryIconProvider('SqueezeDSP', '/plugins/SqueezeDSP/images/SqueezeDSP_MTL_icon_.png');
#Slim::Web::Pages->addPageLinks("icons", { $class->getDisplayName => '/Plugins/SqueezeDSP/SqueezeDSP.png' });

Any suggestions on how to get the icon displayed correctly in the extras space on both normal and material web interfaces?

[cpd73]

If an item is under the 'Extras' it should just show for Material. Material does exclude some items (Alarm, CustomBrowse, DSTM, TrackStat, DynamicPlaylist), but others should be shown fine here. But you do need to enable the showing of 'Extras' in Material's 'Settings -> Interface' dialog - the 'Extras' category is hidden by default.

Yout icon namaing is also incorrect.

- Blah_MTL_icon_yyy.png Will cause Material to look for an icon-name of 'yyy' in the Google Material icon font.
- Blah_MTL_svg_yyy.png Will cause Material to look for an SVG named 'yyy.svg' within Material's icon folder
- Blah_svg.png Will cause Material to look for Blah.svg within your plugin's folder

Hope the above helps.

[foxesden]

Thanks - will give it a go.

Edit
It is working thanks very much .For the record this is what I have

perl command in plugin
Slim::Web::Pages->addPageLinks("icons", { $class->getDisplayName => '/plugins/SqueezeDSP/images/SqueezeDSP_svg.png' });
Then in my plugin images folder
C:\ProgramData\Squeezebox\Cache\InstalledPlugins\P lugins\SqueezeDSP\HTML\EN\plugins\SqueezeDSP\image s

I have 2 images
SqueezeDSP_svg.png - this is my original image and has been named so it complies with the above command
SqueezeDSP.svg - my original image with colours inverted and saved as svg file.

NB I had to invert the colours because I had black on a transparent background which doesn't work so well with Material Dark schema. I may need to play around to get something that is more portable. But in principal it is all working

[cpd73]

SqueezeDSP.svg - my original image with colours inverted and saved as svg file.

NB I had to invert the colours because I had black on a transparent background which doesn't work so well with Material Dark schema. I may need to play around to get something that is more portable. But in principal it is all working

For Material your icon should be monochrome and only use #000 for fills and strokes, etc. Material will then recolour the icon to match the user's theme. The Material Perl code does a simple search and replace on the #000 string.

[foxesden]

Thanks, I will give that a try.

[Edit] Again for completeness of documentation
I opened the SVG file in notepad++ and replaced entries

<path style="opacity:1" fill="#fefefe"
with
<path style="opacity:1" fill="#000"

and this worked as you described, I wasted a bit of time trying to use an online SVG editor to do this only to realise that the colour #000 is just a place-holder.