using 'material icons', icon="filter-list" displays the "filter" icon, a '-' and the 'list' icon.

[kukeltje]

Instead of the "filter-list" icon.

The 'filter-list' name is displayed in the icons page in the theme. When looking for the &#xxx; value on the material icons site, I noticed that they use filter_list (underscore) and that works in the the serenity theme too (might be an issue in all material based themes) and for other icons to.

But looking at the source of the serenity material icons page, I noticed you all explicitly use "ui-icon ui-icon-filter-list", so there is some kind of inconsistency using the 'shortcut' (or did I by accident use it wrong and now run into this.

Cheers

[cagatay.civici]

Not sure if I understand it, how do you use it in code? can you post screenshots of what icon do you expect and what you get instead. ui-icon-* is a helper to use material icons with the PF components.

[kukeltje]

Sorry, should have added code...

This is what I initially had for a menuitem

Code: Select all

	<p:menuitem value="Dashboard" icon="dashboard" outcome="dashboard"/>

I just used the name of the 'icon' in the serenity overview page

Which perfectly renders the materials icon with the folowing html client side

Code: Select all

<i class="material-icons">dashboard</i>

For another menuitem I wanted to use the 'filter-list' icon

Code: Select all

<p:menuitem value="Filters" icon="filter-list" outcome="filters"/>

In html this renders as

Code: Select all

<i class="material-icons">filter-list</i>

But displays as if

Code: Select all

<i class="material-icons">filter</i> - <i class="material-icons">list</i>

is rendered.

See https://screenshots.firefox.com/wlHhZz5 ... /127.0.0.1 (inline images not working)

changing the icon to (underscore instead of dash as I found out via the material icons site)

Code: Select all

<p:menuitem value="Filters" icon="filter_list" outcome="filters"/>

Makes it display a 'filter_list' icon instead of a filter icon, dash and list icon.

So I knowhere used the ui-icon-* format (did not seem needed until I started using ones with dashes in the name)

[cagatay.civici]

I see, ui-icon is mainly for buttons, for the Serenity Menu itself, you can just the name of the material icon from google site, sorry for the confusion. Will add this to docs.

[kukeltje]

No problem, good to have things clarified in docs!

[mert.sincan]

Also, you need to add icon code instead of icon name for IE9 and below. Please examine this link; https://material.io/icons/

[kukeltje]

Yikes... IE9

[mert.sincan]