Adding Icon to a Bootstrap 4 control

I see the icon property for buttons. And bootstrap says it’s “available” for lots of controls, of which google couldn’t find. All I wanted to do was to include one of the iconic “characters” to my app. An arrow image. The button control sort of works for me, in that it has a background color. But I don’t want the button effects. And the background color of the button goes gray on dark mode themes. I basically want an icon on top of a “container” which will have a background color. I was hoping to avoid creating an image and including it, since the iconic is already included in my project.

Just thinking out loud, but can you just use the generic container and add the iconic item code to it? If you want it to overlap another container, you can either play with z-index or use position:relative to overlap two div contents.

I was thinking the same, but thought I’d ask if there was something built in. It turns out this is very easy to do. Create a common controls container. Set it’s size, etc. And in the content property put something like

<span class="oi oi-media-step-backward" aria-hidden="true"></span>

Setting the color and background color of the container allows you to set the color of the icon and background. Font size allows icon size to be changed.