Add custom iconset

FabricElements · Jun 21, 2018 · bf4bf29 · bf4bf29
1 parent 81ce48e
commit bf4bf29
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/icons/carousel.html b/icons/carousel.html
@@ -0,0 +1,26 @@
+<link rel="import" href="../../iron-icon/iron-icon.html">
+<link rel="import" href="../../iron-iconset-svg/iron-iconset-svg.html">
+
+<iron-iconset-svg size="24" name="carousel">
+  <svg>
+    <defs>
+      <g id="arrow-back">
+        <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
+      </g>
+      <g id="arrow-downward">
+        <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"></path>
+      </g>
+      <g id="arrow-forward">
+        <path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"></path>
+      </g>
+      <g id="arrow-upward">
+        <path d="M4 12l1.41 1.41L11 7.83V20h2V7.83l5.58 5.59L20 12l-8-8-8 8z"></path></g>
+      <g id="radio-button-checked">
+        <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>
+      </g>
+      <g id="radio-button-unchecked">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path>
+      </g>
+    </defs>
+  </svg>
+</iron-iconset-svg>
diff --git a/skeleton-carousel.html b/skeleton-carousel.html
@@ -3,8 +3,8 @@
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../iron-selector/iron-selector.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
-<link rel="import" href="../iron-icons/iron-icons.html">
 <link rel="import" href="../polymer/lib/mixins/gesture-event-listeners.html">
+<link rel="import" href="./icons/carousel.html">
 
 <dom-module id="skeleton-carousel">
   <template>
@@ -484,7 +484,7 @@
            */
           _iconPrev: {
             type: String,
-            value: 'icons:arrow-back',
+            value: 'carousel:arrow-back',
             readOnly: true,
             computed: '_computeIconPrev(direction)',
           },
@@ -493,7 +493,7 @@
            */
           _iconNext: {
             type: String,
-            value: 'icons:arrow-forward',
+            value: 'carousel:arrow-forward',
             readOnly: true,
             computed: '_computeIconNext(direction)',
           },
@@ -673,8 +673,10 @@
        */
       _iconDot(item, selected) {
         item--;
-        let icon = 'icons:radio-button-unchecked';
-        if (Number(item) === Number(selected)) icon = 'icons:radio-button-checked';
+        let icon = 'carousel:radio-button-unchecked';
+        if (Number(item) === Number(selected)) {
+          icon = 'carousel:radio-button-checked';
+        }
         return icon;
       }
 
@@ -886,8 +888,8 @@
        * @private
        */
       _computeIconPrev(direction) {
-        if (direction === 'vertical') return 'icons:arrow-upward';
-        return 'icons:arrow-back';
+        if (direction === 'vertical') return 'carousel:arrow-upward';
+        return 'carousel:arrow-back';
       }
 
       /**
@@ -898,8 +900,8 @@
        * @private
        */
       _computeIconNext(direction) {
-        if (direction === 'vertical') return 'icons:arrow-downward';
-        return 'icons:arrow-forward';
+        if (direction === 'vertical') return 'carousel:arrow-downward';
+        return 'carousel:arrow-forward';
       }
 
       /**