Materialize.css insert icon over a card image

Question

Hello, I have some cards in materialize.css that I would like to insert over the image (.card-image) a specific icon (in the example the video icon), but I’m not getting it.

<div class="card-image waves-effect waves-block waves-light" v-if="impar(index)">
                <img class="responsive-img" data-target="modal-{{noticia.id}}" @click.prevent.sync="openModal(noticia.id)"
                     :src="'storage/noticias/images/' + noticia.photo"
                     :class="{'activator': noticia.videoValue}"/>
                <div v-if="noticia.videoValue == false" class="video-icon-noticias valign-wrapper">
                    <a href="#" data-target="modal-{{noticia.id}}"  class="playIcon" @click.prevent.sync="openModal(noticia.id)">
                        <i class="large material-icons">play_circle_outline</i>
                    </a>
                </div>
            </div>

I’ve tried many ways but I couldn’t.

Answer 1

My ignorance. It is documented in the materialize documentation that it is possible to add a title to the image-card. Although not yet able to center the icon it already appears on the image. Follows the code:

<div class="card-image waves-effect waves-block waves-light valign-wrapper" v-if="impar(index)">
                <img class="responsive-img" data-target="modal-{{noticia.id}}" @click.prevent.sync="openModal(noticia.id)"
                     :src="'storage/noticias/images/' + noticia.photo"
                     :class="{'activator': noticia.videoValue}"/>
                <span class="card-title center">
                    <div v-if="noticia.videoValue == false" class="video-icon-noticias valign center-block">
                        <a href="#" data-target="modal-{{noticia.id}}" class="playIcon" @click.prevent.sync="openModal(noticia.id)">
                            <i class="large material-icons">play_circle_outline</i>
                        </a>
                    </div>
                </span>
            </div>