Materialdesign: Table join icons

Created on 21 Jan 2016 · 13Comments · Source: Templarian/MaterialDesign

Table join icons consisting of two overlapping circles.

Inner join: overlapping section filled
Left join: left circle filled
Right join: right circle filled
Full outer: both circles filled

Similar to the images found here: http://www.codeproject.com/Articles/33052/Visual-Representation-of-SQL-Joins

Contribution High Priority Icon Request

Source

hudsonb

Most helpful comment

Added these with a "odd" one pixel line to separate the circles. This visually at 24x24 looks the best while scaling up. Looked a little too bold using the full 2dp line.

Templarian on 6 Mar 2017

👍2 ❤1

All 13 comments

We sort of have icons for this already, but they are rectangular in shape. Search for vector or diff / intersection on the page.

I'll check though how well this works with circles.

CoDEmanX on 21 Jan 2016

I think these would be a good addition to have for uses in DB related applications.

join-* naming style, unless there is something more generic.

Templarian on 21 Jan 2016

The vector/diff icons are similar, but I don't think they cover all the joins. Right join for example is not represented (vector-difference-ab is closest).

Additionally, I think the overlapping filled/unfilled circles is what users/devs are used to seeing.

hudsonb on 21 Jan 2016

Well, these are set operations: https://en.wikipedia.org/wiki/Set_theory

I agree that we should have these as circles. The existing icons have a slightly different meaning, they are meant for 2D vector graphic operations.

CoDEmanX on 21 Jan 2016

set_all not really looking like circles anymore
set_all_variant not much better actually...
set_center_right more like two stacked circles
set_center_right_variant ok
set_intersection ok
set_left could be mistaken for a switch
set_left_center flicker logo, anyone?
set_left_center_variant ok
set_left_right meh
set_left_right_variant ...
set_none ok
set_none_variant not much like two circles

https://www.dropbox.com/s/95alpiwnm17g5hi/2016-01-22_set_theory.zip?dl=0

CoDEmanX on 22 Jan 2016

Maybe they'd be more distinguishable if the circles overlapped less? Though the radius of the circles would likely have to be reduced to do so.

I suppose a back up plan could be the solid/dashed stroke indicating included/excluded instead of fill.

hudsonb on 22 Jan 2016

Yeah, probably, but it's a tricky business because we need to stay on the pixel grid...

CoDEmanX on 22 Jan 2016

I think the overlap amount is good, considering the limitations put in place for a material icon. Will be working to get these in this weekend.

Templarian on 22 Jan 2016

😴 💤

CoDEmanX on 31 Jan 2017

I'd still love to see these included!

hudsonb on 31 Jan 2017

Marked as high priority. We need to get these added.

Templarian on 13 Feb 2017

Added these with a "odd" one pixel line to separate the circles. This visually at 24x24 looks the best while scaling up. Looked a little too bold using the full 2dp line.