Apply Gradient to SVG - Font Awesome

https://github.com/FortAwesome/Font-Awesome/issues/11925 How to apply a gradient to a Font Awesome svg icon.

by the94air

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<head>
    <!-- Font Awesome 5.0.13 CDN -->
    <script defer src="https://use.fontawesome.com/releases/v5.0.13/js/all.js" integrity="sha384-xymdQtn1n3lH2wcu0qhcdaOpQwyoarkgLVxC/wZ5q7h9gHtxICrpcaSUfygqZGOe" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div id="parent" class="col-12 text-center parent-div">
                <i class="fas fa-10x fa-rocket"></i>
            </div>
        </div>
    </div>
    <!-- Define svg -->
    <svg width="0" height="0">
		<linearGradient id="lgrad" x1="100%" y1="100%" x2="0%" y2="0%" >
			<stop offset="0%" style="stop-color:rgb(252,207,49);stop-opacity:1" />
			<stop offset="100%" style="stop-color:rgb(245,85,85);stop-opacity:1" />
		</linearGradient>
	</svg>
</body>

CSS

.parent-div svg * {
    fill: url(#lgrad);
}

/* Only to center icon */

#parent {
    margin-top: 15%;
}

JavaScript

// No javascript necessary