Flexbox - Icon in the Middle

Only because I always forget how to display a box (like a warning box) with the icon floated to the left in the middle of the box. There's like 184 ways to do this. But I think I found the best one (using Bootstrap 4) and wanted to add an easy reference for myself.

Here's the code assuming a danger alert with a Fontwawesome icon:

                <div class="alert alert-danger d-flex">

                    <div class="d-flex align-items-center mr-3">

                        <span class="fas fa-exclamation-triangle text-danger fa-2x"></span>

                    </div>

                    <div>

                        @Html.Raw(TempData["APP_ERROR"])

                    </div>

                </div>