The new icon API documentation says we can add icons as inline HTML, but in fact it only explains how to add them with php or javascript. Is there an easy way to add an icon as inline HTML within in a custom block, for instance?
Most helpful answers
Comments
I don't know a way to add an icon of the new API as inline HTML, but I'm also interested. Maybe file a feature request for Backdrop, and/or follow the progress of the Icon Browser module? (Re the latter, maybe https://github.com/backdrop-contrib/icon_browser/issues/7 could be the basis for a workaround.)
<img src="/core/misc/icons/alarm-fill.svg" class="core-icon">Display text
.core-icon {
width: 16px;
height: 16px;
margin-right: 10px;
}
or with CSS background-image.
/* I recommend stylish Material Icons https://fonts.google.com/icons */
Thanks for the hint, @Enthuisiast, very helpful! Not easy for every content editor but good enough if you know how to find the icon names.
I was curious and tried to control the icon size directly, without the need to touch CSS. Here we are:
<img src="/core/misc/icons/alarm-fill.svg" width="16">
This works with Basis as default theme which sets the height of images to auto.
Finding the Available Icons
Visit phosphoricons.com. This can sometimes make finding an icon easier because they include keyword matching beyond just the icon name.
https://docs.backdropcms.org/documentation/icon-api
<img src="/core/misc/icons/alarm-fill.svg" class="core-icon">Display text
.core-icon {
width: 16px;
height: 16px;
margin-right: 10px;
}
or with CSS background-image.
/* I recommend stylish Material Icons https://fonts.google.com/icons */