Angular

app.component.html

<header class="mdc-toolbar">
  <div class="mdc-toolbar__row">
    <section class="mdc-toolbar__section mdc-toolbar__section--align-start">
      <span class="mdc-toolbar__title">
        <a class="no-link">Github Search</a>
      </span>
    </section>
    <section class="mdc-toolbar__section mdc-toolbar__section--align-end">
      <a class="material-icons search align-icons no-link" aria-label="Search" alt="Search">search</a>
    </section>
  </div>
</header>

css-links

<link rel="stylesheet" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

environment

apiUrl: 'https://api.github.com/users',
  clientId: '162b6220302bba24b794',
  clientSecret: 'b2859870711cdeda2419ae6662f378c65aa615c9',
  user: 'mohammedzamakhan'

getUser

getUser(username) {
    return this.http
      .get(
        `${environment.apiUrl}/${username}?client_id=${environment.clientId}&client_secret=${environment.clientSecret}`
      )
      .catch(() => Observable.of({
        error: true
      }));
  }

loading

<div role="progressbar" class="mdc-linear-progress mdc-linear-progress--indeterminate">
  <div class="mdc-linear-progress__buffering-dots"></div>
  <div class="mdc-linear-progress__buffer"></div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__primary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
  <div class="mdc-linear-progress__bar mdc-linear-progress__secondary-bar">
    <span class="mdc-linear-progress__bar-inner"></span>
  </div>
</div>

search form

<form name="search-form">
  <div class="mdc-form-field mdc-form-field--align-end">
    <div class="mdc-textfield username-field">
      <input type="text" class="mdc-textfield__input" name="search" placeholder="Type Github User Name">
      <div class="mdc-textfield__bottom-line"></div>
    </div>
    <label for="css-only-textfield">username:</label>
  </div>
</form>

styles.scss

body {
  margin: 0;
  font-family: Roboto, sans-serif;
}

.fill-remaining-space {
  flex: 1 1 auto;
}
.logo {
  font-size: 18px;
}
.no-link {
  color: white;
  text-decoration: none;
}
.demo-card__avatar {
  position: absolute;
  background: #bdbdbd;
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 50%;
}

.align-icons {
  margin-right: 10px;
}

.mdc-form-field {
  margin-top: 10px;
}

.username-field {
  width: 300px;
}

.container {
  margin-left: 20px;
  margin-right: 20px;
}

.mdc-theme--dark {
  background: #303030;
}

.demo-card--with-avatar .mdc-card__title,
.demo-card--with-avatar .mdc-card__subtitle {
  margin-left: 56px;
}

user card

<div class="mdc-card demo-card demo-card--with-avatar">
  <section class="mdc-card__primary">
    <img class="demo-card__avatar" [src]="user.avatar_url"/>
    <h1 class="mdc-card__title">{{user.name}}</h1>
    <h2 class="mdc-card__subtitle">{{user.login}}</h2>
  </section>
  <section class="mdc-card__supporting-text">
    {{user.bio}}
  </section>
  <section class="mdc-card__actions">
    <a href="{{user.html_url}}" target="_blank" class="mdc-button mdc-button--raised mdc-card__action">Link to profile</a>
  </section>
</div>