Faaala meus queridos, estou tentando posicionar um icone dentro e no cantro superior direito de um elemento, porém quando aplico right: 0;
meu icone some. Algum mestre dos magos do css por aí?
.btn-redirect {
display: block;
text-align: left;
font-size: 16px;
color: #000;
line-height: 50px;
border-left: 3px solid #7455D4;
margin-bottom: 10px;
background-color: #f5f5f5;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 0 -3px rgba(0,0,0,.12), 0 0 2px 0 rgba(0,0,0,.2);
transition: box-shadow .25s;
border-radius: 3px;
padding: 16px;
}
.icons {
position: absolute;
}
.icons span.material-icons {
color: #5622AC;
position: absolute;
z-index: 100;
/* right: 0; Icone desaparece ao aplicar isso.*/
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<div class="col s12 m3 l3">
<div class="icons"><span id="individual" class="material-icons">error_outline</span></div>
<a id="btn-individual" class="btn-redirect waves-effect waves-light" target="_blank">
DF Individual
</a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>