3 files changed, 41 insertions, 19 deletions
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 5f54b416..42819c19 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -42,14 +42,15 @@
           :value="index"
         >
         <label class="option-vote">
-          <div>{{ option.title }}</div>
+          <!-- eslint-disable-next-line vue/no-v-html -->
+          <div v-html="option.title_html" />
         </label>
       </div>
     </div>
     <div class="footer faint">
       <button
         v-if="!showResults"
-        class="btn btn-default poll-vote-button"
+        class="btn button-default poll-vote-button"
         type="button"
         :disabled="isDisabled"
         @click="vote"
diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
index df93f038..1f8df3f9 100644
--- a/src/components/poll/poll_form.js
+++ b/src/components/poll/poll_form.js
@@ -1,5 +1,17 @@
 import * as DateUtils from 'src/services/date_utils/date_utils.js'
 import { uniq } from 'lodash'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faTimes,
+  faChevronDown,
+  faPlus
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faTimes,
+  faChevronDown,
+  faPlus
+)
 
 export default {
   name: 'PollForm',
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index d53f3837..09496105 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -12,6 +12,7 @@
         <input
           :id="`poll-${index}`"
           v-model="options[index]"
+          size="1"
           class="poll-option-input"
           type="text"
           :placeholder="$t('polls.option')"
@@ -20,24 +21,26 @@
           @keydown.enter.stop.prevent="nextOption(index)"
         >
       </div>
-      <div
+      <button
         v-if="options.length > 2"
-        class="icon-container"
+        class="delete-option button-unstyled -hover-highlight"
+        @click="deleteOption(index)"
       >
-        <i
-          class="icon-cancel"
-          @click="deleteOption(index)"
-        />
-      </div>
+        <FAIcon icon="times" />
+      </button>
     </div>
-    <a
+    <button
       v-if="options.length < maxOptions"
-      class="add-option faint"
+      class="add-option faint button-unstyled -hover-highlight"
       @click="addOption"
     >
-      <i class="icon-plus" />
+      <FAIcon
+        icon="plus"
+        size="sm"
+      />
+
       {{ $t("polls.add_option") }}
-    </a>
+    </button>
     <div class="poll-type-expiry">
       <div
         class="poll-type"
@@ -55,7 +58,10 @@
             <option value="single">{{ $t('polls.single_choice') }}</option>
             <option value="multiple">{{ $t('polls.multiple_choices') }}</option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
       <div
@@ -83,7 +89,10 @@
               {{ $t(`time.${unit}_short`, ['']) }}
             </option>
           </select>
-          <i class="icon-down-open" />
+          <FAIcon
+            class="select-down-icon"
+            icon="chevron-down"
+          />
         </label>
       </div>
     </div>
@@ -103,7 +112,7 @@
   .add-option {
     align-self: flex-start;
     padding-top: 0.25em;
-    cursor: pointer;
+    padding-left: 0.1em;
   }
 
   .poll-option {
@@ -122,10 +131,10 @@
     }
   }
 
-  .icon-container {
+  .delete-option {
     // Hack: Move the icon over the input box
-    width: 2em;
-    margin-left: -2em;
+    width: 1.5em;
+    margin-left: -1.5em;
     z-index: 1;
   }