Custom Web Components (CWC)
Icon (Material Design)
Adding icon support for the Material Iconset. These SVG icons are stylable, sizeable and can be used any where inyour application.
Adding icon support for the Material Iconset. These SVG icons are stylable, sizeable and can be used any where inyour application.
addToQueueairplayalbumartTrackavTimerbrandingWatermarkcallToActionclosedCaptionequalizerexplicitfastForwardfastRewindfeaturedPlayListfeaturedVideofiberDvrfiberManualRecordfiberNewfiberPinfiberSmartRecordforward10forward30forward5gameshdhearinghighQualitylibraryAddlibraryBookslibraryMusicloopmicmicNonemicOffmoviemusicVideonewReleasesnotInterestednotepausepauseCircleFilledpauseCircleOutlineplayArrowplayCircleFilledplayCircleOutlineplaylistAddplaylistAddCheckplaylistPlayqueuequeueMusicqueuePlayNextradiorecentActorsremoveFromQueuerepeatrepeatOnereplayreplay10replay30replay5shuffleskipNextskipPreviousslowMotionVideosnoozesortByAlphastopsubscriptionssubtitlessurroundSoundvideoCallvideoLabelvideoLibraryvideocamvideocamOffvolumeDownvolumeMutevolumeOffvolumeUpwebwebAssetname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-av name="webAsset"></cwc-icon-material-av>
<cwc-icon-material-av class="alter-me" name="webAsset"></cwc-icon-material-av>
businesscallcallEndcallMadecallMergecallMissedcallMissedOutgoingcallReceivedcallSplitchatchatBubblechatBubbleOutlineclearAllcommentcontactMailcontactPhonecontactsdialerSipdialpademailforumimportContactsimportExportinvertColorsOffliveHelplocationOfflocationOnmailOutlinemessagenoSimphonephonelinkErasephonelinkLockphonelinkRingphonelinkSetupportableWifiOffpresentToAllringVolumerssFeedscreenSharespeakerPhonestayCurrentLandscapestayCurrentPortraitstayPrimaryLandscapestayPrimaryPortraitstopScreenShareswapCallstextsmsvoicemailvpnKeyname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-communication name="vpnKey"></cwc-icon-material-communication>
<cwc-icon-material-communication class="alter-me" name="vpnKey"></cwc-icon-material-communication>
accessAlarmaccessAlarmsaccessTimeaddAlarmairplanemodeActiveairplanemodeInactivebattery20battery30battery50battery60battery80battery90batteryAlertbatteryCharging20batteryCharging30batteryCharging50batteryCharging60batteryCharging80batteryCharging90batteryChargingFullbatteryFullbatteryStdbatteryUnknownbluetoothbluetoothConnectedbluetoothDisabledbluetoothSearchingbrightnessAutobrightnessHighbrightnessLowbrightnessMediumdataUsagedeveloperModedevicesdvrgpsFixedgpsNotFixedgpsOffgraphicEqlocationDisabledlocationSearchingnetworkCellnetworkWifinfcscreenLockLandscapescreenLockPortraitscreenLockRotationscreenRotationsdStoragesettingsSystemDaydreamsignalCellular0BarsignalCellular1BarsignalCellular2BarsignalCellular3BarsignalCellular4BarsignalCellularConnectedNoInternet0BarsignalCellularConnectedNoInternet1BarsignalCellularConnectedNoInternet2BarsignalCellularConnectedNoInternet3BarsignalCellularConnectedNoInternet4BarsignalCellularNoSimsignalCellularNullsignalCellularOffsignalWifi0BarsignalWifi1BarsignalWifi1BarLocksignalWifi2BarsignalWifi2BarLocksignalWifi3BarsignalWifi3BarLocksignalWifi4BarsignalWifi4BarLocksignalWifiOffstorageusbwallpaperwidgetswifiLockwifiTetheringname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-device name="wifiTethering"></cwc-icon-material-device>
<cwc-icon-material-device class="alter-me" name="wifiTethering"></cwc-icon-material-device>
attachFileattachMoneyborderAllborderBottomborderClearborderColorborderHorizontalborderInnerborderLeftborderOuterborderRightborderStyleborderTopborderVerticalbubbleChartdragHandleformatAlignCenterformatAlignJustifyformatAlignLeftformatAlignRightformatBoldformatClearformatColorFillformatColorResetformatColorTextformatIndentDecreaseformatIndentIncreaseformatItalicformatLineSpacingformatListBulletedformatListNumberedformatPaintformatQuoteformatShapesformatSizeformatStrikethroughformatTextdirectionLToRformatTextdirectionRToLformatUnderlinedfunctionshighlightinsertChartinsertCommentinsertDriveFileinsertEmoticoninsertInvitationinsertLinkinsertPhotolinearScalemergeTypemodeCommentmodeEditmonetizationOnmoneyOffmultilineChartpieChartpieChartOutlinedpublishshortTextshowChartspaceBarstrikethroughStextFieldstitleverticalAlignBottomverticalAlignCenterverticalAlignTopwrapTextname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-editor name="wrapText"></cwc-icon-material-editor>
<cwc-icon-material-editor class="alter-me" name="wrapText"></cwc-icon-material-editor>
accessibilityaccessibleaccountBalanceaccountBalanceWalletaccountBoxaccountCircleaddaddAlertaddBoxaddCircleaddCircleOutlineaddShoppingCartalarmalarmAddalarmOffalarmOnallOutandroidannouncementappsarchivearrowBackarrowDownwardarrowDropDownarrowDropDownCirclearrowDropUparrowForwardarrowUpwardaspectRatioassessmentassignmentassignmentIndassignmentLateassignmentReturnassignmentReturnedassignmentTurnedInattachmentautorenewbackspacebackupbinocularsblockbookbookmarkbookmarkBorderbugReportbuildcachedcameraEnhancecancelcardGiftcardcardMembershipcardTravelchangeHistorycheckcheckBoxcheckBoxOutlineBlankcheckCirclechevronLeftchevronRightchromeReaderModeclassclearclosecloudcloudCirclecloudDonecloudDownloadcloudOffcloudQueuecloudUploadcodecompareArrowscontentCopycontentCutcontentPastecopyrightcreatecreateNewFoldercreditCarddashboarddateRangedeletedeleteForeverdeleteSweepdescriptiondnsdonedoneAlldonutLargedonutSmalldraftsejecterrorerrorOutlineeuroSymboleventeventSeatexitToAppexpandLessexpandMoreexploreextensionfacefavoritefavoriteBorderfeedbackfileDownloadfileUploadfilterListfindInPagefindReplacefingerprintfirstPageflagflightLandflightTakeoffflipToBackflipToFrontfolderfolderOpenfolderSharedfontDownloadforwardfullscreenfullscreenExitgTranslategavelgesturegetAppgifgradegroupWorkhelphelpOutlinehighlightOffhistoryhomehourglassEmptyhourglassFullhttphttpsimportantDevicesinboxindeterminateCheckBoxinfoinfoOutlineinputinvertColorslabellabelOutlinelanguagelastPagelaunchlightbulbOutlinelineStylelineWeightlinklistlocklockOpenlockOutlinelowPriorityloyaltymailmarkunreadmarkunreadMailboxmenumoreHorizmoreVertmotorcyclemoveToInboxnextWeeknoteAddofflinePinopacityopenInBrowseropenInNewopenWithpageviewpanToolpaymentpermCameraMicpermContactCalendarpermDataSettingpermDeviceInformationpermIdentitypermMediapermPhoneMsgpermScanWifipetspictureInPicturepictureInPictureAltplayForWorkpolymerpowerSettingsNewpregnantWomanprintqueryBuilderquestionAnswerradioButtonCheckedradioButtonUncheckedreceiptrecordVoiceOverredeemredorefreshremoveremoveCircleremoveCircleOutlineremoveShoppingCartreorderreplyreplyAllreportreportProblemrestorerestorePagerotation3droomroundedCornerrowingsaveschedulesearchselectAllsendsettingssettingsApplicationssettingsBackupRestoresettingsBluetoothsettingsBrightnesssettingsCellsettingsEthernetsettingsInputAntennasettingsInputComponentsettingsInputCompositesettingsInputHdmisettingsInputSvideosettingsOverscansettingsPhonesettingsPowersettingsRemotesettingsVoiceshopshopTwoshoppingBasketshoppingCartsortspeakerNotesspeakerNotesOffspellcheckstarstarBorderstarHalfstarsstoresubdirectoryArrowLeftsubdirectoryArrowRightsubjectsupervisorAccountswapHorizswapVertswapVerticalCirclesystemUpdateAlttabtabUnselectedtextFormattheatersthumbDownthumbUpthumbsUpDowntimelinetoctodaytolltouchApptrackChangestranslatetrendingDowntrendingFlattrendingUpturnedInturnedInNotunarchiveundounfoldLessunfoldMoreupdateverifiedUserviewAgendaviewArrayviewCarouselviewColumnviewDayviewHeadlineviewListviewModuleviewQuiltviewStreamviewWeekvisibilityvisibilityOffwarningwatchLaterweekendworkyoutubeSearchedForzoomInzoomOutname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-general name="zoomOut"></cwc-icon-material-general>
<cwc-icon-material-general class="alter-me" name="zoomOut"></cwc-icon-material-general>
castcastConnectedcomputerdesktopMacdesktopWindowsdeveloperBoarddeviceHubdevicesOtherdockgamepadheadsetheadsetMickeyboardkeyboardArrowDownkeyboardArrowLeftkeyboardArrowRightkeyboardArrowUpkeyboardBackspacekeyboardCapslockkeyboardHidekeyboardReturnkeyboardTabkeyboardVoicelaptoplaptopChromebooklaptopMaclaptopWindowsmemorymousephoneAndroidphoneIphonephonelinkphonelinkOffpowerInputrouterscannersecuritysimCardsmartphonespeakerspeakerGrouptablettabletAndroidtabletMactoystvvideogameAssetwatchname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-hardware name="watch"></cwc-icon-material-hardware>
<cwc-icon-material-hardware class="alter-me" name="watch"></cwc-icon-material-hardware>
addAPhotoaddToPhotosadjustassistantassistantPhotoaudiotrackblurCircularblurLinearblurOffblurOnbrightness1brightness2brightness3brightness4brightness5brightness6brightness7brokenImagebrushburstModecameracameraAltcameraFrontcameraRearcameraRollcenterFocusStrongcenterFocusWeakcollectionscollectionsBookmarkcolorLenscolorizecomparecontrolPointcontrolPointDuplicatecropcrop169crop32crop54crop75cropDincropFreecropLandscapecropOriginalcropPortraitcropRotatecropSquaredehazedetailseditexposureexposureNeg1exposureNeg2exposurePlus1exposurePlus2exposureZerofilterfilter1filter2filter3filter4filter5filter6filter7filter8filter9filter9PlusfilterBAndWfilterCenterFocusfilterDramafilterFramesfilterHdrfilterNonefilterTiltShiftfilterVintageflareflashAutoflashOffflashOnflipgradientgraingridOffgridOnhdrOffhdrOnhdrStronghdrWeakhealingimageimageAspectRatioisolandscapeleakAddleakRemovelenslinkedCameralookslooks3looks4looks5looks6looksOnelooksTwoloupemonochromePhotosmovieCreationmovieFiltermusicNotenaturenaturePeoplenavigateBeforenavigateNextpalettepanoramapanoramaFishEyepanoramaHorizontalpanoramaVerticalpanoramaWideAnglephotophotoAlbumphotoCameraphotoFilterphotoLibraryphotoSizeSelectActualphotoSizeSelectLargephotoSizeSelectSmallpictureAsPdfportraitremoveRedEyerotate90DegreesCcwrotateLeftrotateRightslideshowstraightenstyleswitchCameraswitchVideotagFacestexturetimelapsetimertimer10timer3timerOfftonalitytransformtuneviewComfyviewCompactvignettewbAutowbCloudywbIncandescentwbIridescentwbSunnyname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-image name="wbSunny"></cwc-icon-material-image>
<cwc-icon-material-image class="alter-me" name="wbSunny"></cwc-icon-material-image>
addLocationbeenheredirectionsdirectionsBikedirectionsBoatdirectionsBusdirectionsCardirectionsRailwaydirectionsRundirectionsSubwaydirectionsTransitdirectionsWalkeditLocationevStationflighthotellayerslayersClearlocalActivitylocalAirportlocalAtmlocalBarlocalCafelocalCarWashlocalConvenienceStorelocalDininglocalDrinklocalFloristlocalGasStationlocalGroceryStorelocalHospitallocalHotellocalLaundryServicelocalLibrarylocalMalllocalMovieslocalOfferlocalParkinglocalPharmacylocalPhonelocalPizzalocalPlaylocalPostOfficelocalPrintshoplocalSeelocalShippinglocalTaximapmyLocationnavigationnearMepersonPinpersonPinCirclepinDropplacerateReviewrestaurantrestaurantMenusatellitestoreMallDirectorystreetviewsubwayterraintraffictraintramtransferWithinAStationzoomOutMapname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-map name="zoomOutMap"></cwc-icon-material-map>
<cwc-icon-material-map class="alter-me" name="zoomOutMap"></cwc-icon-material-map>
adbairlineSeatFlatairlineSeatFlatAngledairlineSeatIndividualSuiteairlineSeatLegroomExtraairlineSeatLegroomNormalairlineSeatLegroomReducedairlineSeatReclineExtraairlineSeatReclineNormalbluetoothAudioconfirmationNumberdiscFulldoNotDisturbdoNotDisturbAltdoNotDisturbOffdoNotDisturbOndriveEtaenhancedEncryptioneventAvailableeventBusyeventNotefolderSpecialliveTvmmsmorenetworkChecknetworkLockednoEncryptionondemandVideopersonalVideophoneBluetoothSpeakerphoneForwardedphoneInTalkphoneLockedphoneMissedphonePausedpowerpriorityHighrvHookupsdCardsimCardAlertsmssmsFailedsyncsyncDisabledsyncProblemsystemUpdatetapAndPlaytimeToLeavevibrationvoiceChatvpnLockwcwifiname
String
The name of the icon to use.
<!-- direct import from html (you can import with ES6 import too in JS files! -->
<script type="module" src="/node_modules/custom-web-components/src/icon/material/index.js"></script>
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-notification name="wifi"></cwc-icon-material-notification>
<cwc-icon-material-notification class="alter-me" name="wifi"></cwc-icon-material-notification>
acUnitairportShuttleallInclusivebeachAccessbusinessCentercasinochildCarechildFriendlyfitnessCenterfreeBreakfastgolfCoursehotTubkitchenpoolroomServicervHookupsmokeFreesmokingRoomsspaname
String
The name of the icon to use.
<style>
.alter-me {
width: 50px;
height: 50px;
fill: green;
}
</style>
<cwc-icon-material-place name="spa"></cwc-icon-material-place>
<cwc-icon-material-place class="alter-me" name="spa"></cwc-icon-material-place>