How to float an icon to the right in materialize css?

I am trying to make an icon float to the right-edge of the collapsible header, but it is not working. I used style="float:right", but the icon stays at the same place. Here is the code:

$(document).ready(function () {
    $('.collapsible').collapsible();
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Course List</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

<div class="row">
 <div class="container">
  <div class="col s8">
   <ul class="collapsible expandable">
    <li>
      <div class="collapsible-header">
        <span>Functions</span>
        <i class="material-icons blue-text" style="float:right">add</i>
      </div>
      <div class="collapsible-body">
        <span>Lorem ipsum dolor sit amet.</span> 
      </div>
     </li>
    </ul>
   </div>
  </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<script src="app.js"></script>
</body>
</html>

Solution

Check below snippet, you can adjust distance of icon from right-end according to your need.

I added below css

.collapsible-header {
    position: relative;
}

.collapsible-header i.material-icons.blue-text {
    position: absolute;
    right: 0;
}

$(document).ready(function () {
	$('.collapsible').collapsible();
});

.collapsible-header {
    position: relative;
}

.collapsible-header i.material-icons.blue-text {
    position: absolute;
    right: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Course List</title>
	<!--Import Google Icon Font-->
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
	<!-- Compiled and minified CSS -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
	<!--Let browser know website is optimized for mobile-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

<div class="row">
   <div class="container">
		<div class="col s8">
			<ul class="collapsible expandable">
			   <li>
			     <div class="collapsible-header">
			     	<span>Functions</span>
			     	<i class="material-icons blue-text" style="float:right">add</i>
			     </div>
			     <div class="collapsible-body"><span>Lorem ipsum dolor sit amet.</span></div>
			   </li>
			 </ul>
		</div>
	</div>
</div>


 <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
 <script src="app.js"></script>
</body>
</html>