Using material icon font for buttons

[dbauszus-glx]

I had a look at a couple of issues in regards of adding icons from an icon font like material [Google] but didn't find any satisfactory answer. I was able to work this out and would like to share my approach which may help others.

I push a text type button into the items in the onRenderMenu method.

items.push({
  type: 'button',
  className: 'material-symbols-outlined-forced',
  text: 'sync',
  title: 'Update Dataview',
  onClick: updateDataview,
});

The text content [eg sync] is the icon name.

I add a className for this text button.

I set the Material Symbols Outlined font-family as !important to overide the inherited font in the css class specificity.

@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,300,0,0);

.material-symbols-outlined-forced {
  font-family: 'Material Symbols Outlined' !important
}

[josdejong]

Thanks for your question. So, what part is not working? In you screenshot I do see a sync icon, only, it is a bit small compared to the other icons.

[dbauszus-glx]

It's all working. I just wanted to share this with others if they search for this in the issues. I will close this. Do you have a tips and tricks label for this kind of issue?

[josdejong]

Ah, thanks 👍 . I'll move this into the "Discussions" > "Show and tell" section.