Align Icons with Text

How to vertically align text with icon font?

In this scenario, since you are working with inline-level elements, you could add vertical-align: middle to the span elements for vertical centering:

.nav-text {
  vertical-align: middle;
}

Alternatively, you could set the display of the parent element to flex and set align-items to center for vertical centering:

.menu {
  display: flex;
  align-items: center;
}

CSS - Center align text with icon

To vertically center elements, you can use the vertical-algin: middle; rule. In your case, that would most propably be:

.material-icons {
  vertical-align: middle;
}

Here is an example with your dark button:

.material-icons {  vertical-align: middle;  margin-right: 5px;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css" rel="stylesheet" /><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<a href="#" class="grey darken-3 btn"><i class="material-icons">group_work</i>Groups</a>

How to align icon to left and text to the right of it

use flex, it's easier

a {
  text-decoration: none;
}

.bar {
  background: pink;
  color: white;
  border: 1px solid white;
  border-radius: 5px;
  padding: 25px;
  display: flex;
  justify-content:flex-start;
}

.icon {
  font-size: x-large;
  text-align: center;
  width: 25%;
  border:solid 2px red;
}

.text {
  width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<div>
  <a href="https://example.com" target="_blank">
    <div class="bar">
      <div class="icon"><i class="fas fa-folder"></i></div>
      <div class="text"><b>Title</b><br>Description.</div>
    </div>
  </a>
</div>

is there a way to align icon with text

You can use the crossAxisAlignment and mainAxisAlignment property of the Row widgets to determine how the children of the Row widget will be placed.

To center the Text and Icon vertically in the Row widget, set crossAxisAlignment: CrossAxisAlignment.center.

To center the Text and Icon horizontally in the Row widget, set mainAxisAlignment: MainAxisAlignment.center.

I added a demo code using your widget tree as an example, I also removed the top padding you gave the Container as it was putting the items downwards.

Container(
                  margin: EdgeInsets.all(50),
                  height: 40,
                  width: 700,
                  decoration: BoxDecoration(
                      border: Border.all(width: 0.5, color: Colors.brown),
                      borderRadius: BorderRadius.circular(50)),
                  child: Row(
                    // set the crossaxisalignment so the [items] in the  will be vertically centered
                    crossAxisAlignment: CrossAxisAlignment.center,
                    // set the crossaxisalignment so the [items] will be horizontally centered
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        'SÉLECTIONNEZ UNE VILLE',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Colors.black,
                            fontSize: 14,
                            fontWeight: FontWeight.bold),
                      ),
                      SizedBox(
                        width: 10,
                      ),
                      Icon(
                        Icons.keyboard_arrow_down,
                        size: 30,
                      ),
                    ],
                  ),
                ),

OUTPUT:

Sample Image

Align icon with text in header using CSS

The main issue is due to using position:absolute for i::before.

However, I found some other problems while checking your code :

You should not put a block level <p> tag inside an inline <i> tag.
You should use class selectors rather than type selectors for better specificity.

Here is the fixed code :

@import url('https://fonts.googleapis.com/css?family=Work+Sans:400,600');

* {
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  font-size: 14px;
}

body {
  margin: 0;
  font-family: 'Work Sans', sans-serif;
  font-weight: 800;
  font-size: 14px;
}

.container {
  width: 80%;
  margin: 0 auto;
}

.header {
  background: #000000;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1;
  text-align: left;
  height: 50px;
}

.header::after {
  content: '';
  display: table;
  clear: both;
}

.nav {
  float: left;
}

.nav-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu li {
  display: inline-block;
  margin-left: 70px;
  padding-top: 20px;
  padding: 3px;
  color: white;
  position: relative;
}

.nav-link {
  color: rgb(255, 255, 255);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 14px;
}

.nav-link i {
  margin-right: 5px;
}

.nav-link:hover,
.nav-link:hover i {
  color: rgb(249, 225, 8);
}

.nav-link::before {
  content: '';
  display: block;
  height: 5px;
  background-color: rgb(249, 225, 8);
  position: absolute;
  top: 0;
  width: 0%;
  transition: all ease-in-out 250ms;
}

.nav-link:hover::before {
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> Document </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/7a49dc0093.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header class="header">
      <div class="container">
        <h1 class="logo"></h1>
        <nav class="nav">
          <ul class="nav-menu">
            <li><a href="#" class="nav-link"><i class="fa-brands fa-instagram"></i>testing</a></li>
            <li><a href="#" class="nav-link">Home</a></li>
            <li><a href="#" class="nav-link">About Me</a></li>
            <li><a href="#" class="nav-link">Blog</a></li>
            <li><a href="#" class="nav-link">Discover</a></li>
          </ul>
        </nav>
      </div>
    </header>
  </body>
</html>

How to display icon and text below each other with icon in center

You can do this a few ways (once you fix the syntax errors):

1. Using flexbox

With flex you only need to style the container element using the right options to make the child elements act as we wish - see the comments:

li {
  display: flex;
  align-items: center;     /* center align the elements in the container */
  flex-direction: column;  /* make the child elements appear one under another */
}

.icons:before {  content: url(https://via.placeholder.com/200x100); }

<ul>
  <li><i class="icons"></i><span>Icon text 1</span></li>
  <li><i class="icons"></i><span>Icon text 2</span></li>
</ul>