Update PersonCardFields to use Icons

build.gradle

@@ -64,6 +64,10 @@ dependencies {
     implementation group: 'com.fasterxml.jackson.core', name: 'jackson-databind', version: '2.7.0'
     implementation group: 'com.fasterxml.jackson.datatype', name: 'jackson-datatype-jsr310', version: '2.7.4'
 
+    implementation 'org.kordamp.ikonli:ikonli-core:12.3.0'
+    implementation group: 'org.kordamp.ikonli', name: 'ikonli-fontawesome5-pack', version: '12.3.1'
+    implementation 'org.kordamp.ikonli:ikonli-javafx:12.3.1'
+
     testImplementation group: 'org.junit.jupiter', name: 'junit-jupiter-api', version: jUnitVersion
     testRuntimeOnly group: 'org.junit.jupiter', name: 'junit-jupiter-engine', version: jUnitVersion
 }

src/main/java/seedu/address/ui/PersonCard.java

@@ -54,11 +54,11 @@ public PersonCard(Person person, int displayedIndex) {
     }
     private void createFields() {
         name.setText(person.getName().fullName);
-        phone.setText("Phone:", person.getPhone().value);
-        address.setText("Address:", person.getAddress().value);
-        email.setText("Email:", person.getEmail().value);
-        job.setText("Job:", person.getJob().value);
-        income.setText("Income:", person.getIncome().toString());
+        phone.setFields("fas-phone-alt", person.getPhone().value);
+        address.setFields("fas-building", person.getAddress().value);
+        email.setFields("fas-envelope", person.getEmail().value);
+        job.setFields("fas-briefcase", person.getJob().value);
+        income.setFields("fas-dollar-sign", person.getIncome().toString());
         remark.setText(person.getRemark().value);
         cardFields.getChildren().addAll(phone, address, email, job, income);
     }

src/main/java/seedu/address/ui/PersonCardField.java

@@ -1,36 +1,47 @@
 package seedu.address.ui;
 
+import org.kordamp.ikonli.javafx.FontIcon;
+
+import javafx.geometry.Pos;
 import javafx.scene.control.Label;
 import javafx.scene.layout.HBox;
 import javafx.scene.layout.Priority;
+import javafx.scene.paint.Paint;
 
 /**
  * Represents a labelled field in the PersonCard
  */
 public class PersonCardField extends HBox {
-    private Label field;
+    private FontIcon icon;
     private Label value;
 
     /**
      * Creates a template {@code PersonCardField} to display.
      */
     public PersonCardField() {
         super(5);
-        field = new Label();
-        field.setStyle("-fx-font-weight: bold;");
+        icon = new FontIcon();
+        icon.setIconColor(Paint.valueOf("darkgray"));
+
+        HBox iconWrapper = new HBox();
+        iconWrapper.setPrefWidth(20);
+        iconWrapper.setAlignment(Pos.CENTER);
+        iconWrapper.getChildren().add(icon);
+
         value = new Label();
         HBox.setHgrow(value, Priority.ALWAYS);
         value.setWrapText(true);
-        getChildren().addAll(field, value);
+        getChildren().addAll(iconWrapper, value);
     }
 
     /**
-     * Updates the {@code Label} {@code field} and {@code value} with the corresponding strings.
-     * @param fieldText The String to be updated into field.
-     * @param valueText The String to be updated in value.
+     * Updates the {@code PersonCardField} {@code Icon} and {@code Value} with the corresponding strings.
+     *
+     * @param iconLiteral The IconLiteral to be set for the icon.
+     * @param valueText   The String to be updated in value.
      */
-    public void setText(String fieldText, String valueText) {
-        this.field.setText(fieldText);
+    public void setFields(String iconLiteral, String valueText) {
+        this.icon.setIconLiteral(iconLiteral);
         this.value.setText(valueText);
     }
 }