smd-social | Vaadin

A fast way to integrate social buttons into your web app

[ This description is mirrored from at on 2019-05-22 ]

Published on


Install the element

$ bower i --save Soulmatters/smd-social

<smd-social width="30" height="30" logo-circle icon="google-plus"></smd-social>
   <smd-social logo-circle width="30" height="30" icon="facebook"></smd-social>
   <smd-social logo-circle width="30" height="30" icon="twitter"></smd-social>
   <smd-social logo-circle width="30" height="30" icon="youtube"></smd-social>
   <smd-social logo-circle width="30" height="30" icon="dribbble"></smd-social>
   <smd-social logo-circle width="30" height="30" icon="linkedin"></smd-social>
   <smd-social logo-circle width="30" height="30" icon="pinterest"></smd-social>
   <smd-social logo-circle width="30" height="30" icon="behance"></smd-social>

Use the element

<smd-social width="30" height="30" logo-circle icon="google-plus"></smd-social>

Element properties

icon: String, the name of the social media (Google+, facebook, twitter, dribbble, linkedin, behance, youtube, pinterest),
fillColor: String, the color fill of the social icon,
width,height: String, the size of the icon,
logoColor: Boolean if set to true uses the original color of the social media as icon color,
logoCircle: Boolean if set to true uses the original color of the social media as icon background,
iconBg: String for the custom color of the icon background,
link: String the set the link of the icon,
target: String, default '_blank'.


Fixed element ripple overflow


Link to this version
ImportedReleased 12 March 2018Other
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
Release notes - Version 1.0.2



  • PolymerElements/iron-icon#^2.0.0
  • PolymerElements/iron-iconset-svg#^2.0.0
  • PolymerElements/paper-ripple#^2.0.0
  • PolymerElements/paper-styles#^2.0.0