diff --git a/client/galaxy/scripts/components/Dataset/DatasetName.test.js b/client/galaxy/scripts/components/Dataset/DatasetName.test.js
index 931a5aeae4d..5540dd9a31e 100644
--- a/client/galaxy/scripts/components/Dataset/DatasetName.test.js
+++ b/client/galaxy/scripts/components/Dataset/DatasetName.test.js
@@ -4,7 +4,7 @@ import DatasetName from "./DatasetName";
 describe("Dataset Name", () => {
     it("test dataset default", async () => {
         const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "success" } } });
-        const state = wrapper.findAll("span");
+        const state = wrapper.findAll(".name");
         expect(state.length).to.equal(1);
         expect(state.at(0).text()).to.equal("name");
         const $linkShow = wrapper.find(".dropdown-item:first-child");
@@ -16,16 +16,20 @@ describe("Dataset Name", () => {
     });
     it("test dataset error", async () => {
         const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "error" } } });
-        const state = wrapper.findAll("span");
-        expect(state.length).to.equal(2);
-        expect(state.at(0).classes()).to.include("text-danger");
-        expect(state.at(1).text()).to.equal("name");
+        const state = wrapper.findAll(".name");
+        expect(state.length).to.equal(1);
+        expect(state.at(0).text()).to.equal("name");
+        const errorstate = wrapper.findAll(".error");
+        expect(errorstate.length).to.equal(1);
+        expect(errorstate.at(0).classes()).to.include("text-danger");
     });
     it("test dataset paused", async () => {
         const wrapper = mount(DatasetName, { propsData: { item: { name: "name", state: "paused" } } });
-        const state = wrapper.findAll("span");
-        expect(state.length).to.equal(2);
-        expect(state.at(0).classes()).to.include("text-info");
-        expect(state.at(1).text()).to.equal("name");
+        const state = wrapper.findAll(".name");
+        expect(state.length).to.equal(1);
+        expect(state.at(0).text()).to.equal("name");
+        const pausestate = wrapper.findAll(".pause");
+        expect(pausestate.length).to.equal(1);
+        expect(pausestate.at(0).classes()).to.include("text-info");
     });
 });
diff --git a/client/galaxy/scripts/components/Dataset/DatasetName.vue b/client/galaxy/scripts/components/Dataset/DatasetName.vue
index a5bced3c410..136eb43e75f 100644
--- a/client/galaxy/scripts/components/Dataset/DatasetName.vue
+++ b/client/galaxy/scripts/components/Dataset/DatasetName.vue
@@ -2,28 +2,35 @@
     <div>
         <b-link
             id="dataset-dropdown"
-            class="workflow-dropdown font-weight-bold"
+            class="workflow-dropdown font-weight-bold p-2"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false"
         >
             <span
                 v-if="isError"
-                class="fa fa-times-circle text-danger mr-1"
+                class="dataset-icon error fa fa-times-circle text-danger"
                 v-b-tooltip.hover
                 title="An error occurred for this dataset."
             />
             <span
-                v-if="isPaused"
-                class="fa fa-pause text-info mr-1"
+                v-else-if="isPaused"
+                class="dataset-icon pause fa fa-pause text-info"
                 v-b-tooltip.hover
                 title="The creation of this dataset has been paused."
             />
-            <span> {{ this.getName }}</span>
+            <span v-else class="dataset-icon fa fa-caret-down" />
+            <span class="name">{{ this.getName }}</span>
         </b-link>
         <div class="dropdown-menu" aria-labelledby="dataset-dropdown">
-            <a class="dropdown-item" href="#" @click.prevent="showDataset">Show in History</a>
-            <a class="dropdown-item" href="#" @click.prevent="copyDataset">Copy to History</a>
+            <a class="dropdown-item" href="#" @click.prevent="showDataset">
+                <span class="fa fa-eye fa-fw mr-1" />
+                <span>Show in History</span>
+            </a>
+            <a class="dropdown-item" href="#" @click.prevent="copyDataset">
+                <span class="fa fa-copy fa-fw mr-1" />
+                <span>Copy to History</span>
+            </a>
         </div>
     </div>
 </template>
@@ -58,3 +65,10 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+.dataset-icon {
+    position: relative;
+    margin-left: -1rem;
+}
+</style>
diff --git a/client/galaxy/scripts/components/Workflow/WorkflowDropdown.vue b/client/galaxy/scripts/components/Workflow/WorkflowDropdown.vue
index 5dcbb99e0b8..3a062b739a2 100644
--- a/client/galaxy/scripts/components/Workflow/WorkflowDropdown.vue
+++ b/client/galaxy/scripts/components/Workflow/WorkflowDropdown.vue
@@ -8,21 +8,48 @@
             aria-expanded="false"
         >
             <span :class="icon" />
-            {{ workflow.name }}
+            <span>{{ workflow.name }}</span>
         </b-link>
         <p v-if="workflow.description">{{ workflow.description }}</p>
         <div v-if="workflow.shared" class="dropdown-menu" aria-labelledby="workflow-dropdown">
-            <a class="dropdown-item" href="#" @click.prevent="onCopy">Copy</a>
-            <a class="dropdown-item" :href="urlViewShared">View</a>
+            <a class="dropdown-item" href="#" @click.prevent="onCopy">
+                <span class="fa fa-copy fa-fw mr-1" />
+                <span>Copy</span>
+            </a>
+            <a class="dropdown-item" :href="urlViewShared">
+                <span class="fa fa-eye fa-fw mr-1" />
+                <span>View</span>
+            </a>
         </div>
         <div v-else class="dropdown-menu" aria-labelledby="workflow-dropdown">
-            <a class="dropdown-item" :href="urlEdit">Edit</a>
-            <a class="dropdown-item" href="#" @click.prevent="onCopy">Copy</a>
-            <a class="dropdown-item" :href="urlDownload">Download</a>
-            <a class="dropdown-item" href="#" @click.prevent="onRename">Rename</a>
-            <a class="dropdown-item" :href="urlShare">Share</a>
-            <a class="dropdown-item" :href="urlView">View</a>
-            <a class="dropdown-item" href="#" @click.prevent="onDelete">Delete</a>
+            <a class="dropdown-item" :href="urlEdit">
+                <span class="fa fa-edit fa-fw mr-1" />
+                <span>Edit</span>
+            </a>
+            <a class="dropdown-item" href="#" @click.prevent="onCopy">
+                <span class="fa fa-copy fa-fw mr-1" />
+                <span>Copy</span>
+            </a>
+            <a class="dropdown-item" :href="urlDownload">
+                <span class="fa fa-download fa-fw mr-1" />
+                <span>Download</span>
+            </a>
+            <a class="dropdown-item" href="#" @click.prevent="onRename">
+                <span class="fa fa-signature fa-fw mr-1" />
+                <span>Rename</span>
+            </a>
+            <a class="dropdown-item" :href="urlShare">
+                <span class="fa fa-share-alt fa-fw mr-1" />
+                <span>Share</span>
+            </a>
+            <a class="dropdown-item" :href="urlView">
+                <span class="fa fa-eye fa-fw mr-1" />
+                <span>View</span>
+            </a>
+            <a class="dropdown-item" href="#" @click.prevent="onDelete">
+                <span class="fa fa-trash fa-fw mr-1" />
+                <span>Delete</span>
+            </a>
         </div>
     </div>
 </template>
@@ -47,7 +74,7 @@ export default {
             if (this.workflow.shared) {
                 return "fa fa-share-alt";
             }
-            return null;
+            return "fa fa-caret-down";
         }
     },
     created() {