Material design icons in oh-cell

Add-ons UIs
1

Hi,

I am creating some widgets for the new mainui, using OH3.1. However, I seem to be unable to use material design icons:

For example:

component: oh-cell
config:
  title: Alarm
  icon: material:alarm

This results in the following HTML code:

<i class="header-icon icon f7-icons" style="font-size: 20px; width: 20px; height: 20px;">erial:alarm</i>

As you can see, it simply cuts off the first three characters off the icon name, which is fine if I had put something like “f7:alarm”. If I enter something like “oh:attic”, it works as well, creating a completely different code snippet referring to the OH icons. But not for the keyword “material:”.

What am I doing wrong?

2

You’re not doing anything wrong, material icon support is inconsistent. Some widgets, like the oh-button have a iconMaterial property, but some don’t yet support it. The good news is that starting soon, the oh-icon will support material icons and you can place that in other widget slots instead of using the built in icon property.

1 Like
3

Incidentally the changes liked above fixes the OP’s problem with oh-cell (which was an actual bug) - now using the material:iconName syntax in the icon property works!

1 Like