title: Styling an angular material contact form using md-list-item
body: <p>I am trying to create a contact info form which should resemble the following picture however I am facing some difficulties:</p>
  
  <p><a href="https://i.stack.imgur.com/Lvyz8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Lvyz8.png" alt="enter image description here"></a></p>
  
  <p>For doing so I came up with the following:</p>
  
  <pre><code>     &lt;div layout-gt-sm="row" tdMediaToggle="gt-xs" [mediaClasses]="['push-sm']"&gt;
    &lt;div flex-gt-sm="50"&gt;
      &lt;md-card&gt;
        &lt;md-list&gt;
          &lt;md-list-item&gt;
            &lt;div class="md-list-item-text"&gt;
  
              Name
  
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;p&gt;
                &lt;strong&gt;John Smith&lt;/strong&gt;
              &lt;/p&gt;
            &lt;/div&gt;
  
            &lt;button md-button (click)="doNothing()"&gt;&lt;md-icon md-font-set="material-icons" aria-label="view"&gt;navigate_next&lt;/md-icon&gt;&lt;/button&gt;
          &lt;/md-list-item&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
  
          &lt;md-list-item&gt;
            &lt;div class="md-list-item-text"&gt;
              &lt;p&gt;
                Email
              &lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;p&gt;
                &lt;strong&gt;test@test.com&lt;/strong&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;button md-button (click)="doNothing()"&gt;&lt;md-icon md-font-set="material-icons" aria-label="view"&gt;navigate_next&lt;/md-icon&gt;&lt;/button&gt;
          &lt;/md-list-item&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
  
          &lt;md-list-item (click)="doNothing()"&gt;
            &lt;div class="md-list-item-text"&gt;
              &lt;p&gt;
                Phone
              &lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;p&gt;
                &lt;strong&gt;0123456789&lt;/strong&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;button md-button (click)="doNothing()"&gt;&lt;md-icon md-font-set="material-icons" aria-label="view"&gt;navigate_next&lt;/md-icon&gt;&lt;/button&gt;
          &lt;/md-list-item&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
  
          &lt;md-list-item&gt;
            &lt;div class="md-list-item-text"&gt;
              &lt;p&gt;
                Birhtday
              &lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;p&gt;
                &lt;strong&gt;10-10-1980&lt;/strong&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;button md-button (click)="doNothing()"&gt;&lt;md-icon md-font-set="material-icons" aria-label="view"&gt;navigate_next&lt;/md-icon&gt;&lt;/button&gt;
          &lt;/md-list-item&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
          &lt;md-list-item&gt;
            &lt;div class="md-list-item-text"&gt;
              &lt;p&gt;
                Gender
              &lt;/p&gt;
            &lt;/div&gt;
  
            &lt;div&gt;
              &lt;p&gt;
                &lt;strong&gt;Male&lt;/strong&gt;
              &lt;/p&gt;
            &lt;/div&gt;
            &lt;button md-button (click)="doNothing()"&gt;&lt;md-icon md-font-set="material-icons" aria-label="view"&gt;navigate_next&lt;/md-icon&gt;&lt;/button&gt;
          &lt;/md-list-item&gt;
          &lt;md-divider&gt;&lt;/md-divider&gt;
        &lt;/md-list&gt;
      &lt;/md-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Above looks like the following:</p>
  
  <p><a href="https://i.stack.imgur.com/i3Cds.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i3Cds.png" alt="enter image description here"></a></p>
  
  <ol>
  <li>How would I divide my list item similar to the first picture into 3 so name appears in the left, data appears in the the middle and the next arrow icon on the right?</li>
  <li>How would I position this  in the centre of the screen rather than left?</li>
  <li>When I hover over the md-icons its background becomes grey. How would I keep the white background and not change it?</li>
  <li>How do you increase the height of the md-list-item similar to the initial form?</li>
  </ol>
  
  <p>For your information this is an Angular 4 project and I use the following packages:</p>
  
  <pre><code>  "dependencies": {
      "@angular/animations": "^4.2.0",
      "@angular/common": "^4.2.0",
      "@angular/compiler": "^4.2.0",
      "@angular/core": "^4.2.0",
      "@angular/flex-layout": "2.0.0-beta.8",
      "@angular/forms": "^4.2.0",
      "@angular/http": "^4.2.0",
      "@angular/material": "2.0.0-beta.6",
      "@angular/platform-browser": "^4.2.0",
      "@angular/platform-browser-dynamic": "^4.2.0",
      "@angular/platform-server": "^4.2.0",
      "@angular/router": "^4.2.0",
      "@covalent/core": "1.0.0-beta.5",
      "@covalent/dynamic-forms": "1.0.0-beta.5",
      "@covalent/highlight": "1.0.0-beta.5",
      "@covalent/http": "1.0.0-beta.5",
      "@covalent/markdown": "1.0.0-beta.5",
      "@ngx-translate/core": "^7.1.0",
      "@ngx-translate/http-loader": "^0.1.0",
      "core-js": "^2.4.1",
      "font-awesome": "^4.7.0",
      "hammerjs": "^2.0.8",
      "ionicons": "^3.0.0",
      "moment": "^2.18.1",
      "ng2-charts": "^1.6.0",
      "ng2-datetime-picker": "^0.15.1",
      "ng2-file-upload": "^1.2.1",
      "oidc-client": "^1.3.0",
      "rxjs": "^5.4.2",
      "showdown": "^1.7.1",
      "zone.js": "^0.8.16"
    },
  </code></pre>
  
  <p><strong>Update 1:</strong></p>
  
  <p>Right now the the output takes the entire width of the screen similar to below but I want it to appear as a fixed size box at top centre of the screen:</p>
  
  <p><a href="https://i.stack.imgur.com/IbOdJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IbOdJ.png" alt="enter image description here"></a></p>