Position Material icone within tag span

Question

Faaala my dears, I’m trying to position an icon in and in the upper right corner of an element, but when I apply right: 0; my icone some. Some css wizards master around?

.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>

https://jsfiddle.net/joaofds/u149jtz3/104/

Answer 1

In the parent element you must put position: relative and have a fixed size on it, and the element you want to position should be like position: absolute;

https://jsfiddle.net/2xr46an0/

I changed the structure of her element a little bit, she was like this:

<div class="col s12 m3 l3">
  <a id="btn-individual" class="btn-redirect waves-effect waves-light" target="_blank">
    DF Individual
    <div class="icons"><span id="individual" class="material-icons">error_outline</span></div>
  </a>
</div>

and in css added:

#btn-individual {
  position: relative;
}

.icons {
  position: absolute;
  top: 0;
  right: 0;
}