Change package hide/show icons

src/app/app.component.ts

@@ -27,7 +27,7 @@ import { Location } from '@angular/common';
       <div class="package"><b>{{package.name}}</b></div>
       <ng-template ngFor let-group [ngForOf]="package.groups">
         <div *ngIf="filteredGroup(group)">
-          <div class="group" (click)="group.hidden = !group.hidden">{{typeKindNames[group.kind]}}<img src="assets/vdots_24px.svg" *ngIf="!group.hidden"><img src="assets/hdots_24px.svg" *ngIf="group.hidden"></div>
+          <div class="group" (click)="group.hidden = !group.hidden">{{typeKindNames[group.kind]}}<img src="assets/eye_24px.svg" *ngIf="!group.hidden"><img src="assets/eye_off_24px.svg" *ngIf="group.hidden"></div>
           <ul class="types" [hidden]="group.hidden">
           <li *ngFor="let type of group.members | nameFilter:filter" class="type"
             [class.selected]="type.id === selectedType"

src/assets/eye_24px.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r"
+   sodipodi:docname="eye_24px.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="24.527766"
+     inkscape:cx="11.780135"
+     inkscape:cy="8.3188377"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-global="true"
+     units="px"
+     inkscape:window-width="1267"
+     inkscape:window-height="1349"
+     inkscape:window-x="134"
+     inkscape:window-y="811"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1028.3622)">
+    <g
+       id="g4597"
+       transform="matrix(0.76805241,0,0,0.76805241,-0.5560555,244.10111)"
+       style="stroke:#999999;stroke-width:1.87186503;stroke-miterlimit:4;stroke-dasharray:none">
+      <ellipse
+         ry="5.4657755"
+         rx="5.5792518"
+         cy="1036.822"
+         cx="16.122522"
+         id="path4593"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.87186503;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+      <path
+         sodipodi:nodetypes="cscsc"
+         inkscape:connector-curvature="0"
+         id="path4595"
+         d="m 2.1079426,1038.3458 c 4.8242173,-5.2199 7.371697,-9.1847 14.5869894,-9.1847 5.808547,0 9.679104,4.5766 13.874059,8.5217 -4.980141,4.242 -8.935255,6.6112 -14.27674,6.6112 -6.3462725,0 -9.3581516,-2.2494 -14.1843084,-5.9482 z"
+         style="fill:none;fill-rule:evenodd;stroke:#666666;stroke-width:1.87186503;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>

src/assets/eye_off_24px.svg

+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="24"
+   height="24"
+   viewBox="0 0 24 24"
+   id="svg2"
+   version="1.1"
+   inkscape:version="0.91 r"
+   sodipodi:docname="eye_off_24px.svg">
+  <defs
+     id="defs4" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="24.527766"
+     inkscape:cx="12.412072"
+     inkscape:cy="10.765045"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:snap-global="true"
+     units="px"
+     inkscape:window-width="1267"
+     inkscape:window-height="1349"
+     inkscape:window-x="52"
+     inkscape:window-y="1012"
+     inkscape:window-maximized="0" />
+  <metadata
+     id="metadata7">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-1028.3622)">
+    <path
+       style="fill:none;fill-rule:evenodd;stroke:#666666;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
+       d="m 4.6477938,1031.6917 14.9626342,17.8981"
+       id="path5311"
+       inkscape:connector-curvature="0" />
+    <g
+       id="g4597-0"
+       transform="matrix(0.76805241,0,0,0.76805241,-0.5560555,244.10111)"
+       style="stroke:#999999;stroke-width:1.87186503;stroke-miterlimit:4;stroke-dasharray:none">
+      <ellipse
+         ry="5.4657755"
+         rx="5.5792518"
+         cy="1036.822"
+         cx="16.122522"
+         id="path4593-4"
+         style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;fill:#666666;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:1.87186503;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" />
+      <path
+         sodipodi:nodetypes="cscsc"
+         inkscape:connector-curvature="0"
+         id="path4595-8"
+         d="m 2.1079426,1038.3458 c 4.8242173,-5.2199 7.371697,-9.1847 14.5869894,-9.1847 5.808547,0 9.679104,4.5766 13.874059,8.5217 -4.980141,4.242 -8.935255,6.6112 -14.27674,6.6112 -6.3462725,0 -9.3581516,-2.2494 -14.1843084,-5.9482 z"
+         style="fill:none;fill-rule:evenodd;stroke:#666666;stroke-width:1.87186503;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+    </g>
+  </g>
+</svg>