Material-design-icons: Logout icon

[Aides359]

It would be really nice having a logout icon (something like an open door with an arrow), since it's needed quite often

[jestelle]

No guarantees we'll get to new icon requests soon, but thanks for the request!

[pbhowmic]

is there an existing login icon?

[igordelorenzi]

Actually there's an icon for logout. Or it was created for another purpose?

[Aides359]

I'm not really satisfied with this icon since in my opinion it lacks clearness.
If anyone is interested, I created one for my own project (not sure if it observes all material design guidelines), feel free to use it as you want.

http://www.filedropper.com/logoutmaterial

[visualpharm]

If you like any of our logouts, we can release it open source: http://icons8.com/web-app/for/all/logout , or to crate another one according to your specs.

[radoslavpetranov]

As a temporary solution you can use

power_settings_new

https://www.google.com/design/icons/#ic_power_settings_new

[Tourenathan-G5organisation]

Yes, i agree with you radoslavpetranov. i think that is the best alternative now

[d668]

OK but logout icon is a must. Current icon looks like login

[d668]

no, exit_to_app is confusing, in looks like login, google "logout icon" to see how it should look like

[Zuurkern]

Glad to see other people using power_settings_new as a (hopefully) temporary replacement for a logout icon. I would still love to see what the MD team can come up with though, as I'm sure this icon was intended for something different.

[LinkDinkin]

I'm also using power_settings_new, but would much prefer a traditional Sign Out icon (see: http://ux.stackexchange.com/questions/53871/why-are-those-sign-in-sign-out-icon-a-convention). Thanks to the MD team for great icons so far.

Also, #250 and #253.

[ZakTaccardi]

A 180 degree rotation (flip) for the exit_to_app icon would work well too

[awitherow]

In my react-native project, I implemented what @ZakTaccardi mentioned, with a 180 transformed exit to app icon.

[mxl]

Something like https://gist.github.com/mxl/4281c3a188489d43a35704ed209b18e5#file-log_out-svg ?

[antoinerousseau]

yep! perfect!!

[demiro]

I cannot believe that almost in the end of 2017 there's still no correct, dedicated login/logout buttons.... these are essential in every app!

[dhilban]

It seems that all gigantic internet players "prohibited" us sign out from any apps for entire life :)
_Please don't sign out guys_

[abukhan]

When will we get sign-in/log-in , sign-out/log/out icons ??

[stephengardner]

bumpitty bump bump!

[danaia]

When I taught at the HCI CMU Masters program and told my students that Material UI did NOT have a logout icon, they told me 'that is impossible'. My CMU students could not believe the Material UI library does not have an official logout icon. I think this is a total embarrassment to Google since the icon library is so robust but lacks something so fundamental. C'mon how long would it take? Want me to design it for you? So silly.

[mkell85]

Voicing my support for a proper logout icon.

[CyanoFresh]

OMG, this is impossible

[P110]

Would like a proper log out icon please, it was requested in 2015, bit of a backlog there :P

[Baneeishaque]

+1

[colinwoods]

+1

[kylefrost]

_3 years later_

This comment inspired this project of mine: SpongeCards

[bori87]

+1

[ImpulseTheFox]

Wow

[DoubleHub]

Wow I cannot believe there is no good icon yet

[McKean]

what's wrong with https://material.io/icons/#ic_power_settings_new

[Invis1ble]

Yeah, lets poweroff our users.

[McKean]

no, it's their own choice.

[Motassem-MK]

another desperate +1

[LeoJHarris]

I would an imagine an icon like this might suffice https://cdn4.iconfinder.com/data/icons/human-values-solid/100/_-71-512.png ... if one existed in the material design.

[sebastiande]

+1

[bori87]

At least we have very usefull PREGNANT WOMAN icon
```html
pregnant_woman
````

[Traxo7]

Google is currently using exit_to_app themselves.
So atm exit_to_app icon is our best choice.

EDIT:
Apparently logout icon is now supported.

[SerhiiCho]

I'm using "power_settings_new" which is like "power" icon in font-awesome

[nemanja-carecom]

I've used "undo" and i think it's working pretty well in my use case
https://material.io/tools/icons/?search=undo&icon=undo&style=baseline

[kmyles82]

You can use exit_to_app as a materilize icon https://material.io/tools/icons/?search=exit&icon=exit_to_app&style=baseline

[dalyhabit]

exit_to_app is not an acceptable logout icon! Just read the name. The logout icon should visually tell the user, "exit the app".

It should be a door (opening away from you) with an arrow pointing through it.

It is ridiculous that Google's icon library doesn't have a real, dedicated logout icon, three years after the issue was pointed out.

[t-buss]

Who needs a logout icon? At least, we have <i class="material-icons">rowing</i>! What would we do without it?

[DoubleHub]

God I love this thread

[qortex]

God I love this thread

You must really not need a logout icon to find this thread funny :)

[antoinerousseau]

God I love this thread

You must really not need a logout icon to find this thread funny :)

You must really lack a sense of humor :)

[ganz00]

good news !!
obviously the material icon site is not up to date,
you can use :
<mat-icon>logout</mat-icon>

[JakeStoeffler]

Thanks @ganz00, but does anyone know where this icon's source is? I need an svg and could not find it in this repo.

[antoinerousseau]

@jestelle @shyndman the last release is more than two years old, can we have an update please? :)

[Kizmar]

Luckily things like Material-UI easily support using Fontawesome since they actually have icons handy for use on web apps. I'm a little baffled that there aren't login/logout icons in the MD spec.

[dalyhabit]

@ganz00 The mysterious hidden logout icon only works if you use the Google Fonts import method of Material Icons. If you import via npm, it does not exist. Although, I'm not sure if the npm package is officially supported by Google.

[danielo515]

So, what is the status ? Is there any library (ej, material-ui) which supports logout ?

[megalepozy]

@danielo515 for me the logout icon (which is not displayed at their site as an option!) work when I import the following <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
afterwards I just added <mat-icon>logout</mat-icon> where needed (thanks to @ganz00)

[sam3k]

Hmm, bumping this. It is really needed. :)

[cyberalien]

This repository seems abandoned and out of date.

Good news is its open source, so anyone can make a copy and update it, which is what I did: https://github.com/cyberalien/google-material-design-icons-updated

That repository includes latest icons from material.io in 5 variations for each icon. I fixed bugged icons and re-added most (the rest will be added soon) icons that were removed since version 3.

Then I added custom log_in and log_out icons:

Baseline: https://github.com/cyberalien/google-material-design-icons-updated/blob/master/svg/action/baseline-log_in.svg and https://github.com/cyberalien/google-material-design-icons-updated/blob/master/svg/action/baseline-log_out.svg

Round: https://github.com/cyberalien/google-material-design-icons-updated/blob/master/svg/action/round-log_in.svg and https://github.com/cyberalien/google-material-design-icons-updated/blob/master/svg/action/round-log_out.svg

Other variations (outline, sharp, twotone) of these 2 icons are same as baseline because they are too simple.

Its not available as font, but it is available as SVG framework that behaves similar to font and as React component.

Enjoy :)

[l-k22]

Re 'exit_to_app' icon. This is rather ridiculous design and wording decision, the arrow is pointing the wrong way and is visually similar to the 'input' icon. Was the intended purpose for something completely different? Perhaps something was lost in translation?

[sbeitzel]

Absolutely necessary. I'm developing mobile apps with Flutter, not web apps with JS. I need to let the current user logout. For now, I'll hack something together, but let me just say that this circular firing squad is the kind of thing that makes me wish Apple dominated the world.

[lucasmatoscc]

A 180 degree rotation (flip) for the exit_to_app icon would work well too

I solved this problem this way

Dart:
Dart new RotationTransition( turns: new AlwaysStoppedAnimation(180 / 360), child: Icon( Icons.exit_to_app, ), ),

[OnkelTem]

Enjoy :)

I would definitely enjoy if I could change color of these icons. They're imported "black" and I cannot do anything with it using Material UI + React.

The way I import them is:

import { ReactComponent as LogoutIcon } from "./svg/baseline-log_out.svg"

which is a "create-react-app" way of doing such things. And afterwards I'm unable to change its color:

<LogoutIcon color={"primary"}/>

Sure, I could do it using css (e.g. { fill: "red" }) but it doesn't have anything in common with Material-UI way of doing things.

[cyberalien]

I would definitely enjoy if I could change color of these icons. They're imported "black" and I cannot do anything with it using Material UI + React.

Icons in this repository don't have color either. You get black color by default because default fill is black.

So you must have done some pre-processing before importing icons. Use same pre-processing for logout icon.

If you don't do pre-processing, but using icons downloaded elsewhere with color already changed, here are few possible solutions to pre-processing script:

1. Simply add style:

// Load original icon
code = code.replace('<svg', '<svg style="fill: currentColor"');
// Save updated icon

This method works well with this set because all icons use only fill.

1. I've built tools for processing icons for my Iconify project, you can use them to process icons.

npm install @iconify/tools

"use strict";

const tools = require('@iconify/tools');

const sourceDir = 'svg/original';
const targetDir = 'svg/processed';

let collection;
tools.ImportDir(sourceDir, {
    keywordCallback: name => name
}).then(res => {
    collection = res;
    return collection.promiseEach(svg => tools.ChangePalette(svg, {
        add: 'currentColor'
    }));
}).then(res => {
    return tools.ExportDir(collection, targetDir);
}).then(res => {
    console.log('Done.');
}).catch(err => {
    console.error(err);
});

That code imports all icons, then finds shapes that use default color for fill or stroke and sets color to currentColor, then exports updated icons. You can use same sourceDir and targetDir because processing icon again won't add new attributes - tools apply changes only to icons that don't have color.

[ggedde]

Yeah I am a bit surprised too.
no matter how you use exit_to_app it looks like login.
@mxl Your implementation is perfect.

For now I have been using "eject" as you are sort of ejecting from the app :)

[HowAreU]

Use font awesome icons https://pub.dev/packages/font_awesome_flutter

Signout Icon => FontAwesomeIcons.signOutAlt

[DoubleHub]

Use font awesome icons pub.dev/packages/font_awesome_flutter

Signout Icon => FontAwesomeIcons.signOutAlt

Are you aware that this is the Material Design icons pack?

[jshepin]

Icons.exit_to_app is logout

[keyvanm]

@jshepin In a logout button the arrow should point out of the box, but in exit_to_app it points into the box

[erperejildo]

what about if I have a log out and exit app option? Do I need to use same icon for both?

[OnkelTem]

what about if I have a log out and exit app option? Do I need to use same icon for both?

Consider hiring Google ;-)

[erperejildo]

what about if I have a log out and exit app option? Do I need to use same icon for both?

Consider hiring Google ;-)

Too expensive but I can consider using a different library

[OnkelTem]

Too expensive but I can consider using a different library

No need in libraries, just go and find appropriate SVG icon and add it to your project.
Let me show you how I manage icons in my React projects.

Basically, I put all the icons in a separate file - let's call it /src/components/icons.

Then whenever I need an icons somewhere, I just reimport it via that icons file.
This also applies to cusom SVG icons which I just put right into that file.
It allows me to keep all the icons in the same place which is very handy as you see which icons you really use throughout the project.

Sample /src/components/icons file:

import React from "react";
import {
  Menu as MenuIcon,
  MoreVert as MoreVertIcon,
  WifiTethering as WifiTetheringIcon,
  //...
} from '@material-ui/icons';
import {
  Eye as EyeIcon,
  EyeOff as EyeOffIcon,
  AccountOutline as AccountOutlineIcon,
  // ...
} from 'mdi-material-ui';

import SvgIcon from '@material-ui/core/SvgIcon';

const LoginIcon = (props) => {
  return (
    <SvgIcon {...props}>
      <path d="M9 2h9c1.1 0 2 .9 2 2v16c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-2h2v2h9V4H9v2H7V4c0-1.1.9-2 2-2z"/>
      <path d="M10.09 15.59L11.5 17l5-5-5-5-1.41 1.41L12.67 11H3v2h9.67z"/>
    </SvgIcon>
  )
};

const LogoutIcon = (props) => {
  return (
    <SvgIcon {...props}>
      <path d="M6 2h9a2 2 0 0 1 2 2v1a1 1 0 0 1-2 0V4H6v16h9v-1a1 1 0 0 1 2 0v1a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2z"/>
      <path d="M16.795 16.295c.39.39 1.02.39 1.41 0l3.588-3.588a1 1 0 0 0 0-1.414l-3.588-3.588a.999.999 0 0 0-1.411 1.411L18.67 11H10a1 1 0 0 0 0 2h8.67l-1.876 1.884a.999.999 0 0 0 .001 1.411z"/>
    </SvgIcon>
  )
};

// ... etc

export {
  MenuIcon,
  MoreVertIcon,
  LoginIcon,
  LogoutIcon,
  // ...
}

Just remember to keep svg clean. There should not be any colors, styles and etc. Ideally the <SvgIcon> children should just a set of paths with coordinates.

[erperejildo]

honestly if I need to create the svg myself I prefer to choose a different library to keep using the same design. There are plenty of options.

But thanks

[takashi1kun]

bump

[marhyno]

bump

[salleh]

though there are alternative ways to get proper logout/sign-out icons into our app... the missing of 'intuitive' icon for such action in this icon set for quite some time is perplexing still.

[diaconori]

So many years later, where the hell is it? If you're constantly pushing us towards using a standardized design theme then at least cover all the icons.

[brunocoelho]

The last commit was pushed more than two years ago. I think this repo is no longer maintained, better to add transform: rotate(180deg) and be happy.

[ggedde]

I have just switched to https://materialdesignicons.com/
They have all the missing icons that you need plus many many more :)

[pkmangukiya]

is there an existing login icon?
Yes there is
Icons.exit_to_app

[diaconori]

That's not what we're looking for. We need a reversed one of which you're
suggesting dude.

Med venlig hilsen,
Diaco Nori
Mobil tlf.: [phone]
E-mail: [email protected]

Den tor. 11. jun. 2020 kl. 12.50 skrev pkmangukiya <[email protected]

:

is there an existing login icon?
Yes there is
Icons.exit_to_app

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/google/material-design-icons/issues/71#issuecomment-642567143,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AI4M2OZKJE354DDDOVE4WF3RWCZHLANCNFSM4A3IDB6A
.

[erperejildo]

Sprint planning:
SM: Guys, we need to create a logout icon. Estimations?
DEVS: A decade
SM: Fair enough

[l-k22]

Noticed a few sites like twitch that use material icons have logout buttons but with the arrow pointing the correct way, must be a custom icon set or something. Wish I knew

[Chibionos]

Can't we just contribute the icon in ?

[GabDug]

Although not documented, the 'logout' icon is present in the file available on Google Fonts https://fonts.googleapis.com/css?family=Material+Icons.

Indeed the file seems to contain 1500+ icons, when only ~1300 are documented.

Here is our logout icon when opening the .woff2 file:

If you are making a web app, no need to add a custom svg, it loads just like any other icon. I hope it'll help somebody at the end of this thread!

[maxloh]

Although not documented, the 'logout' icon is present in the file available on Google Fonts https://fonts.googleapis.com/css?family=Material+Icons.

Indeed the file seems to contain 1500+ icons, when only ~1300 are documented.

Here is our logout icon when opening the .woff2 file:

If you are making a web app, no need to add a custom svg, it loads just like any other icon. I hope it'll help somebody at the end of this thread!

What website is this?

[DoubleHub]

So basically the official list is just outdated and there are a lot of hidden icons that you can only find if you open the actual font file? Interesting...

[malikbenkirane]

@maxloh in the css file at the address there is a url(...woff2) that loads the font, you can use any software that display fonts characters to inspect all the icons available with the font.
@dugnychon may share with us the software he uses to open the woff2 file if he cans

[maxloh]

@maxloh in the css file at the address there is a url(...woff2) that loads the font, you can use any software that display fonts characters to inspect all the icons available with the font.
@Dugnychon may share with us the software he uses to open the woff2 file if he cans

I am just wondering what software did you use. It looks nice.

[maxloh]

So basically the official list is just outdated and there are a lot of hidden icons that you can only find if you open the actual font file? Interesting...

Yeah. Here are the list of 1537 available icons (font ligatures), extracted from MaterialIcons-Regular.ttf, as of 30-7-2020

["10k","10mp","11mp","12mp","13mp","14mp","15mp","16mp","17mp","18mp","19mp","1k","1k_plus","20mp","21mp","22mp","23mp","24mp","2k","2k_plus","2mp","360","3d_rotation","3k","3k_plus","3mp","4k","4k_plus","4mp","5g","5k","5k_plus","5mp","6_ft_apart","6k","6k_plus","6mp","7k","7k_plus","7mp","8k","8k_plus","8mp","9k","9k_plus","9mp","ac_unit","access_alarm","access_alarms","access_time","accessibility","accessibility_new","accessible","accessible_forward","account_balance","account_balance_wallet","account_box","account_circle","account_tree","ad_units","adb","add","add_a_photo","add_alarm","add_alert","add_box","add_business","add_call","add_chart","add_circle","add_circle_outline","add_comment","add_ic_call","add_link","add_location","add_location_alt","add_moderator","add_photo_alternate","add_road","add_shopping_cart","add_to_drive","add_to_home_screen","add_to_photos","add_to_queue","addchart","adjust","admin_panel_settings","agriculture","airline_seat_flat","airline_seat_flat_angled","airline_seat_individual_suite","airline_seat_legroom_extra","airline_seat_legroom_normal","airline_seat_legroom_reduced","airline_seat_recline_extra","airline_seat_recline_normal","airplanemode_active","airplanemode_inactive","airplanemode_off","airplanemode_on","airplay","airport_shuttle","alarm","alarm_add","alarm_off","alarm_on","album","all_inbox","all_inclusive","all_out","alt_route","alternate_email","amp_stories","analytics","anchor","android","animation","announcement","apartment","api","app_blocking","app_registration","app_settings_alt","approval","apps","architecture","archive","arrow_back","arrow_back_ios","arrow_circle_down","arrow_circle_up","arrow_downward","arrow_drop_down","arrow_drop_down_circle","arrow_drop_up","arrow_forward","arrow_forward_ios","arrow_left","arrow_right","arrow_right_alt","arrow_upward","art_track","article","aspect_ratio","assessment","assignment","assignment_ind","assignment_late","assignment_return","assignment_returned","assignment_turned_in","assistant","assistant_direction","assistant_navigation","assistant_photo","atm","attach_email","attach_file","attach_money","attachment","attractions","audiotrack","auto_awesome","auto_awesome_mosaic","auto_awesome_motion","auto_delete","auto_fix_high","auto_fix_normal","auto_fix_off","auto_stories","autorenew","av_timer","baby_changing_station","backpack","backspace","backup","backup_table","badge","bakery_dining","ballot","bar_chart","batch_prediction","bathtub","battery_alert","battery_charging_full","battery_full","battery_std","battery_unknown","beach_access","bedtime","beenhere","bento","bike_scooter","biotech","block","block_flipped","bluetooth","bluetooth_audio","bluetooth_connected","bluetooth_disabled","bluetooth_searching","blur_circular","blur_linear","blur_off","blur_on","bolt","book","book_online","bookmark","bookmark_border","bookmark_outline","bookmarks","border_all","border_bottom","border_clear","border_color","border_horizontal","border_inner","border_left","border_outer","border_right","border_style","border_top","border_vertical","branding_watermark","breakfast_dining","brightness_1","brightness_2","brightness_3","brightness_4","brightness_5","brightness_6","brightness_7","brightness_auto","brightness_high","brightness_low","brightness_medium","broken_image","browser_not_supported","brunch_dining","brush","bubble_chart","bug_report","build","build_circle","burst_mode","bus_alert","business","business_center","cached","cake","calculate","calendar_today","calendar_view_day","call","call_end","call_made","call_merge","call_missed","call_missed_outgoing","call_received","call_split","call_to_action","camera","camera_alt","camera_enhance","camera_front","camera_rear","camera_roll","campaign","cancel","cancel_presentation","cancel_schedule_send","car_rental","car_repair","card_giftcard","card_membership","card_travel","carpenter","cases","casino","cast","cast_connected","cast_for_education","category","celebration","cell_wifi","center_focus_strong","center_focus_weak","change_history","charging_station","chat","chat_bubble","chat_bubble_outline","check","check_box","check_box_outline_blank","check_circle","check_circle_outline","checkroom","chevron_left","chevron_right","child_care","child_friendly","chrome_reader_mode","circle","circle_notifications","class","clean_hands","cleaning_services","clear","clear_all","close","close_fullscreen","closed_caption","closed_caption_disabled","closed_caption_off","cloud","cloud_circle","cloud_done","cloud_download","cloud_off","cloud_queue","cloud_upload","code","collections","collections_bookmark","color_lens","colorize","comment","comment_bank","commute","compare","compare_arrows","compass_calibration","compress","computer","confirmation_num","confirmation_number","connect_without_contact","connected_tv","construction","contact_mail","contact_phone","contact_support","contactless","contacts","content_copy","content_cut","content_paste","control_camera","control_point","control_point_duplicate","copyright","coronavirus","corporate_fare","countertops","create","create_new_folder","credit_card","crop","crop_16_9","crop_3_2","crop_5_4","crop_7_5","crop_din","crop_free","crop_landscape","crop_original","crop_portrait","crop_rotate","crop_square","dangerous","dashboard","dashboard_customize","data_usage","date_range","deck","dehaze","delete","delete_forever","delete_outline","delete_sweep","delivery_dining","departure_board","description","design_services","desktop_access_disabled","desktop_mac","desktop_windows","details","developer_board","developer_mode","device_hub","device_thermostat","device_unknown","devices","devices_other","dialer_sip","dialpad","dinner_dining","directions","directions_bike","directions_boat","directions_bus","directions_car","directions_ferry","directions_off","directions_railway","directions_run","directions_subway","directions_train","directions_transit","directions_walk","dirty_lens","disc_full","dnd_forwardslash","dns","do_not_disturb","do_not_disturb_alt","do_not_disturb_off","do_not_disturb_on","do_not_step","do_not_touch","dock","domain","domain_disabled","domain_verification","done","done_all","done_outline","donut_large","donut_small","double_arrow","drafts","drag_handle","drag_indicator","drive_eta","drive_file_move","drive_file_move_outline","drive_file_rename_outline","drive_folder_upload","dry","dry_cleaning","duo","dvr","dynamic_feed","dynamic_form","east","eco","edit","edit_attributes","edit_location","edit_off","edit_road","eject","elderly","electric_bike","electric_car","electric_moped","electric_rickshaw","electric_scooter","electrical_services","elevator","email","emoji_emotions","emoji_events","emoji_flags","emoji_food_beverage","emoji_nature","emoji_objects","emoji_people","emoji_symbols","emoji_transportation","engineering","enhance_photo_translate","enhanced_encryption","equalizer","error","error_outline","escalator","escalator_warning","euro","euro_symbol","ev_station","event","event_available","event_busy","event_note","event_seat","exit_to_app","expand","expand_less","expand_more","explicit","explore","explore_off","exposure","exposure_minus_1","exposure_minus_2","exposure_neg_1","exposure_neg_2","exposure_plus_1","exposure_plus_2","exposure_zero","extension","face","face_retouching_natural","fact_check","family_restroom","fast_forward","fast_rewind","fastfood","favorite","favorite_border","favorite_outline","featured_play_list","featured_video","feedback","fence","festival","fiber_dvr","fiber_manual_record","fiber_new","fiber_pin","fiber_smart_record","file_copy","file_download","file_download_done","file_present","file_upload","filter","filter_1","filter_2","filter_3","filter_4","filter_5","filter_6","filter_7","filter_8","filter_9","filter_9_plus","filter_alt","filter_b_and_w","filter_center_focus","filter_drama","filter_frames","filter_hdr","filter_list","filter_list_alt","filter_none","filter_tilt_shift","filter_vintage","find_in_page","find_replace","fingerprint","fire_extinguisher","fire_hydrant","fireplace","first_page","fit_screen","fitness_center","flag","flaky","flare","flash_auto","flash_off","flash_on","flight","flight_land","flight_takeoff","flip","flip_camera_android","flip_camera_ios","flip_to_back","flip_to_front","folder","folder_open","folder_shared","folder_special","follow_the_signs","font_download","food_bank","format_align_center","format_align_justify","format_align_left","format_align_right","format_bold","format_clear","format_color_fill","format_color_reset","format_color_text","format_indent_decrease","format_indent_increase","format_italic","format_line_spacing","format_list_bulleted","format_list_numbered","format_list_numbered_rtl","format_paint","format_quote","format_shapes","format_size","format_strikethrough","format_textdirection_l_to_r","format_textdirection_r_to_l","format_underline","format_underlined","forum","forward","forward_10","forward_30","forward_5","forward_to_inbox","foundation","free_breakfast","fullscreen","fullscreen_exit","functions","g_translate","gamepad","games","gavel","gesture","get_app","gif","goat","golf_course","gps_fixed","gps_not_fixed","gps_off","grade","gradient","grading","grain","graphic_eq","grass","grid_off","grid_on","grid_view","group","group_add","group_work","hail","handyman","hardware","hd","hdr_enhanced_select","hdr_off","hdr_on","hdr_strong","hdr_weak","headset","headset_mic","headset_off","healing","hearing","hearing_disabled","height","help","help_center","help_outline","high_quality","highlight","highlight_alt","highlight_off","highlight_remove","history","history_edu","history_toggle_off","home","home_filled","home_repair_service","home_work","horizontal_rule","horizontal_split","hot_tub","hotel","hourglass_bottom","hourglass_disabled","hourglass_empty","hourglass_full","hourglass_top","house","house_siding","how_to_reg","how_to_vote","http","https","hvac","icecream","image","image_aspect_ratio","image_not_supported","image_search","imagesearch_roller","import_contacts","import_export","important_devices","inbox","indeterminate_check_box","info","info_outline","input","insert_chart","insert_chart_outlined","insert_comment","insert_drive_file","insert_emoticon","insert_invitation","insert_link","insert_photo","insights","integration_instructions","inventory","invert_colors","invert_colors_off","invert_colors_on","ios_share","iso","keyboard","keyboard_arrow_down","keyboard_arrow_left","keyboard_arrow_right","keyboard_arrow_up","keyboard_backspace","keyboard_capslock","keyboard_control","keyboard_hide","keyboard_return","keyboard_tab","keyboard_voice","king_bed","kitchen","label","label_important","label_important_outline","label_off","label_outline","landscape","language","laptop","laptop_chromebook","laptop_mac","laptop_windows","last_page","launch","layers","layers_clear","leaderboard","leak_add","leak_remove","leave_bags_at_home","legend_toggle","lens","library_add","library_add_check","library_books","library_music","lightbulb","lightbulb_outline","line_style","line_weight","linear_scale","link","link_off","linked_camera","liquor","list","list_alt","live_help","live_tv","local_activity","local_airport","local_atm","local_attraction","local_bar","local_cafe","local_car_wash","local_convenience_store","local_dining","local_drink","local_fire_department","local_florist","local_gas_station","local_grocery_store","local_hospital","local_hotel","local_laundry_service","local_library","local_mall","local_movies","local_offer","local_parking","local_pharmacy","local_phone","local_pizza","local_play","local_police","local_post_office","local_print_shop","local_printshop","local_restaurant","local_see","local_shipping","local_taxi","location_city","location_disabled","location_history","location_off","location_on","location_pin","location_searching","lock","lock_clock","lock_open","lock_outline","login","logout","looks","looks_3","looks_4","looks_5","looks_6","looks_one","looks_two","loop","loupe","low_priority","loyalty","lunch_dining","mail","mail_outline","map","maps_ugc","margin","mark_as_unread","mark_chat_read","mark_chat_unread","mark_email_read","mark_email_unread","markunread","markunread_mailbox","masks","maximize","mediation","medical_services","meeting_room","memory","menu","menu_book","menu_open","merge_type","message","messenger","messenger_outline","mic","mic_external_off","mic_external_on","mic_none","mic_off","microwave","military_tech","minimize","miscellaneous_services","missed_video_call","mms","mobile_friendly","mobile_off","mobile_screen_share","mode_comment","mode_edit","model_training","monetization_on","money","money_off","monitor","monochrome_photos","mood","mood_bad","moped","more","more_horiz","more_time","more_vert","motion_photos_off","motion_photos_on","motion_photos_paused","motorcycle","mouse","move_to_inbox","movie","movie_creation","movie_filter","mp","multiline_chart","multiple_stop","multitrack_audio","museum","music_note","music_off","music_video","my_library_add","my_library_books","my_library_music","my_location","nat","nature","nature_people","navigate_before","navigate_next","navigation","near_me","near_me_disabled","network_cell","network_check","network_locked","network_wifi","new_releases","next_plan","next_week","nfc","night_shelter","nightlife","nightlight_round","nights_stay","no_cell","no_drinks","no_encryption","no_flash","no_food","no_meals","no_meeting_room","no_photography","no_sim","no_stroller","no_transfer","north","north_east","north_west","not_accessible","not_interested","not_listed_location","not_started","note","note_add","notes","notification_important","notifications","notifications_active","notifications_none","notifications_off","notifications_on","notifications_paused","now_wallpaper","now_widgets","offline_bolt","offline_pin","offline_share","ondemand_video","online_prediction","opacity","open_in_browser","open_in_full","open_in_new","open_with","outbox","outdoor_grill","outgoing_mail","outlet","outlined_flag","padding","pages","pageview","palette","pan_tool","panorama","panorama_fish_eye","panorama_fisheye","panorama_horizontal","panorama_horizontal_select","panorama_photosphere","panorama_photosphere_select","panorama_vertical","panorama_vertical_select","panorama_wide_angle","panorama_wide_angle_select","park","party_mode","pause","pause_circle_filled","pause_circle_outline","pause_presentation","payment","payments","pedal_bike","pending","pending_actions","people","people_alt","people_outline","perm_camera_mic","perm_contact_cal","perm_contact_calendar","perm_data_setting","perm_device_info","perm_device_information","perm_identity","perm_media","perm_phone_msg","perm_scan_wifi","person","person_add","person_add_alt","person_add_alt_1","person_add_disabled","person_outline","person_pin","person_pin_circle","person_remove","person_remove_alt_1","person_search","personal_video","pest_control","pest_control_rodent","pets","phone","phone_android","phone_bluetooth_speaker","phone_callback","phone_disabled","phone_enabled","phone_forwarded","phone_in_talk","phone_iphone","phone_locked","phone_missed","phone_paused","phonelink","phonelink_erase","phonelink_lock","phonelink_off","phonelink_ring","phonelink_setup","photo","photo_album","photo_camera","photo_camera_back","photo_camera_front","photo_filter","photo_library","photo_size_select_actual","photo_size_select_large","photo_size_select_small","picture_as_pdf","picture_in_picture","picture_in_picture_alt","pie_chart","pie_chart_outlined","pin_drop","pivot_table_chart","place","plagiarism","play_arrow","play_circle_fill","play_circle_filled","play_circle_outline","play_disabled","play_for_work","playlist_add","playlist_add_check","playlist_play","plumbing","plus_one","point_of_sale","policy","poll","polymer","pool","portable_wifi_off","portrait","post_add","power","power_input","power_off","power_settings_new","pregnant_woman","present_to_all","preview","print","print_disabled","priority_high","privacy_tip","psychology","public","public_off","publish","push_pin","qr_code","qr_code_scanner","query_builder","question_answer","queue","queue_music","queue_play_next","quick_contacts_dialer","quick_contacts_mail","quickreply","radio","radio_button_checked","radio_button_off","radio_button_on","radio_button_unchecked","railway_alert","ramen_dining","rate_review","read_more","receipt","receipt_long","recent_actors","recommend","record_voice_over","redeem","redo","reduce_capacity","refresh","remove","remove_circle","remove_circle_outline","remove_done","remove_from_queue","remove_moderator","remove_red_eye","remove_shopping_cart","reorder","repeat","repeat_on","repeat_one","repeat_one_on","replay","replay_10","replay_30","replay_5","replay_circle_filled","reply","reply_all","report","report_off","report_problem","request_quote","reset_tv","restaurant","restaurant_menu","restore","restore_from_trash","restore_page","rice_bowl","ring_volume","roofing","room","room_preferences","room_service","rotate_90_degrees_ccw","rotate_left","rotate_right","rounded_corner","router","rowing","rss_feed","rtt","rule","rule_folder","run_circle","rv_hookup","sanitizer","satellite","save","save_alt","saved_search","scanner","scatter_plot","schedule","schedule_send","school","science","score","screen_lock_landscape","screen_lock_portrait","screen_lock_rotation","screen_rotation","screen_search_desktop","screen_share","sd","sd_card","sd_storage","search","search_off","security","segment","select_all","self_improvement","send","send_and_archive","send_to_mobile","sensor_door","sensor_window","sentiment_dissatisfied","sentiment_neutral","sentiment_satisfied","sentiment_satisfied_alt","sentiment_very_dissatisfied","sentiment_very_satisfied","set_meal","settings","settings_applications","settings_backup_restore","settings_bluetooth","settings_brightness","settings_cell","settings_display","settings_ethernet","settings_input_antenna","settings_input_component","settings_input_composite","settings_input_hdmi","settings_input_svideo","settings_overscan","settings_phone","settings_power","settings_remote","settings_system_daydream","settings_voice","share","shield","shop","shop_two","shopping_bag","shopping_basket","shopping_cart","short_text","show_chart","shuffle","shuffle_on","shutter_speed","sick","signal_cellular_0_bar","signal_cellular_4_bar","signal_cellular_alt","signal_cellular_connected_no_internet_4_bar","signal_cellular_no_sim","signal_cellular_null","signal_cellular_off","signal_wifi_0_bar","signal_wifi_4_bar","signal_wifi_4_bar_lock","signal_wifi_off","sim_card","sim_card_alert","single_bed","skip_next","skip_previous","slideshow","slow_motion_video","smart_button","smartphone","smoke_free","smoking_rooms","sms","sms_failed","snippet_folder","snooze","soap","sort","sort_by_alpha","source","south","south_east","south_west","spa","space_bar","speaker","speaker_group","speaker_notes","speaker_notes_off","speaker_phone","speed","spellcheck","sports","sports_bar","sports_baseball","sports_basketball","sports_cricket","sports_esports","sports_football","sports_golf","sports_handball","sports_hockey","sports_kabaddi","sports_mma","sports_motorsports","sports_rugby","sports_soccer","sports_tennis","sports_volleyball","square_foot","stacked_bar_chart","stairs","star","star_border","star_half","star_outline","star_rate","stars","stay_current_landscape","stay_current_portrait","stay_primary_landscape","stay_primary_portrait","sticky_note_2","stop","stop_circle","stop_screen_share","storage","store","store_mall_directory","storefront","straighten","stream","streetview","strikethrough_s","stroller","style","subdirectory_arrow_left","subdirectory_arrow_right","subject","subscript","subscriptions","subtitles","subtitles_off","subway","superscript","supervised_user_circle","supervisor_account","support","support_agent","surround_sound","swap_calls","swap_horiz","swap_horizontal_circle","swap_vert","swap_vert_circle","swap_vertical_circle","swipe","switch_account","switch_camera","switch_left","switch_right","switch_video","sync","sync_alt","sync_disabled","sync_problem","system_update","system_update_alt","system_update_tv","tab","tab_unselected","table_chart","table_rows","table_view","tablet","tablet_android","tablet_mac","tag","tag_faces","takeout_dining","tap_and_play","tapas","taxi_alert","terrain","text_fields","text_format","text_rotate_up","text_rotate_vertical","text_rotation_angledown","text_rotation_angleup","text_rotation_down","text_rotation_none","text_snippet","textsms","texture","theater_comedy","theaters","thumb_down","thumb_down_alt","thumb_down_off_alt","thumb_up","thumb_up_alt","thumb_up_off_alt","thumbs_up_down","time_to_leave","timelapse","timeline","timer","timer_10","timer_3","timer_off","title","toc","today","toggle_off","toggle_on","toll","tonality","topic","touch_app","tour","toys","track_changes","traffic","train","tram","transfer_within_a_station","transform","transit_enterexit","translate","trending_down","trending_flat","trending_neutral","trending_up","trip_origin","tty","tune","turned_in","turned_in_not","tv","tv_off","two_wheeler","umbrella","unarchive","undo","unfold_less","unfold_more","unsubscribe","update","upgrade","upload_file","usb","verified","verified_user","vertical_align_bottom","vertical_align_center","vertical_align_top","vertical_split","vibration","video_call","video_collection","video_label","video_library","video_settings","videocam","videocam_off","videogame_asset","view_agenda","view_array","view_carousel","view_column","view_comfortable","view_comfy","view_compact","view_day","view_headline","view_in_ar","view_list","view_module","view_quilt","view_sidebar","view_stream","view_week","vignette","visibility","visibility_off","voice_chat","voice_over_off","voicemail","volume_down","volume_mute","volume_off","volume_up","volunteer_activism","vpn_key","vpn_lock","wallet_giftcard","wallet_membership","wallet_travel","wallpaper","warning","wash","watch","watch_later","water_damage","waterfall_chart","waves","wb_auto","wb_cloudy","wb_incandescent","wb_iridescent","wb_shade","wb_sunny","wb_twighlight","wc","web","web_asset","weekend","west","whatshot","wheelchair_pickup","where_to_vote","widgets","wifi","wifi_calling","wifi_lock","wifi_off","wifi_protected_setup","wifi_tethering","wine_bar","work","work_off","work_outline","workspaces_filled","workspaces_outline","wrap_text","wrong_location","wysiwyg","youtube_searched_for","zoom_in","zoom_out","zoom_out_map"]

[GabDug]

@maxloh in the css file at the address there is a url(...woff2) that loads the font, you can use any software that display fonts characters to inspect all the icons available with the font.
@Dugnychon may share with us the software he uses to open the woff2 file if he cans

I am just wondering what software did you use. It looks nice.

I used a random online tool. I don't remember which one, but I tested at least https://fontdrop.info/ and http://mathew-kurian.github.io/CharacterMap/. Some tools only read a certain type of font filen, but the .tff or .woff2 are equivalent and contains the same icons.

I've created an updated icon list, greatly inspired by the official one but containing all the icons. It's just a prototype for now but you can check it out here

So basically the official list is just outdated and there are a lot of hidden icons that you can only find if you open the actual font file? Interesting...

It's really weird because the list has been updated recently (it includes a coronavirus icon for instance), but the logout icon is still a ghost.
I've noticed that a lot of the undocumented icons are just aliases for existing icons, and most are not available in other themes (two tone, outlined...).

[DoubleHub]

Thank you @Dugnychon the website is really cool!

[x-daniel-17]

Why isn't the icon documented yet? Cmon Google.

[amand33p]

It's 2020, still no logout/login icons. C'mon google.

[diaconori]

Pathetic... They push for market dominance and standardization but won't cover elements that can indicate just the slightest chance of users leaving their platform for a simple log-out... LOL.

[hhsissi]

Hi, can we try to contribute ? This is taking forever...

[dainius-s]

It's as others pointed out: already exist but hidden in font source files.

If you want to use it make sure you are getting fonts from latest branch or if you use from google fonts url.

In Angular2 you can use new LOGOUT icon like this
<mat-icon>logout</mat-icon>

[diaconori]

What about for Android???

tor. 10. sep. 2020 16.27 skrev Dainius Stepulevicius <
[email protected]>:

It's as others pointed out: already exist but hidden in font source files.

If you want to use it make sure you are getting fonts from latest branch
or if you use from google fonts url.

In Angular2 you can use new LOGOUT icon like this
logout

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/google/material-design-icons/issues/71#issuecomment-690325717,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AI4M2O2W62I2PC2SKE36QQTSFDO4NANCNFSM4A3IDB6A
.

[dainius-s]

What about for Android??? tor. 10. sep. 2020 16.27 skrev Dainius Stepulevicius < [email protected]>:
…
It's as others pointed out: already exist but hidden in font source files. If you want to use it make sure you are getting fonts from latest branch or if you use from google fonts url. In Angular2 you can use new LOGOUT icon like this logout — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#71 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AI4M2O2W62I2PC2SKE36QQTSFDO4NANCNFSM4A3IDB6A .

If you are using plain CSS then try ( Tested on material.io website html)

<span class="material-icons">logout</span>

[diaconori]

What about Android?

tor. 10. sep. 2020 17.37 skrev Dainius Stepulevicius <
[email protected]>:

What about for Android??? tor. 10. sep. 2020 16.27 skrev Dainius
Stepulevicius < [email protected]>:
… <#m_2013903199273581458_>
It's as others pointed out: already exist but hidden in font source files.
If you want to use it make sure you are getting fonts from latest branch or
if you use from google fonts url. In Angular2 you can use new LOGOUT icon
like this logout — You are receiving this because you commented. Reply to
this email directly, view it on GitHub <#71 (comment)
https://github.com/google/material-design-icons/issues/71#issuecomment-690325717>,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AI4M2O2W62I2PC2SKE36QQTSFDO4NANCNFSM4A3IDB6A
.

If you are using plain CSS then try ( Tested on material.io website html)

logout

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub
https://github.com/google/material-design-icons/issues/71#issuecomment-690373004,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AI4M2O3WU3J2KLLEQIXLVLLSFDXEJANCNFSM4A3IDB6A
.

[dainius-s]

What about Android? tor. 10. sep. 2020 17.37 skrev Dainius Stepulevicius < [email protected]>:
…
What about for Android??? tor. 10. sep. 2020 16.27 skrev Dainius Stepulevicius < @.*>: …

I am not sure what are you referring to. What framework do you use? Android is an OS and almost anything can be deployed on it.

[bergamin]

Thanks everyone for finding <mat-icon>logout</mat-icon>

Too bad the place I use these use outlined by default and this icon disappears when using outlined (I know outlined would be the same). Good news, I'm free to change this component, so I think I'll add a parameter for people to choose which kind of icon they want (filled, outlined, rounded, two-tone or sharp)

I believe this could be the reason why it is still not in the documentation. Maybe they don't add there if it is still not available to all kinds of icons...

[aykxt]

The SVG logout icon can be found here (in case someone needs to use it): https://github.com/google/material-design-icons/blob/master/src/action/logout/materialicons/24px.svg

[SamReturned]

Does the undocumented logout icon also exist within the npm install for react?

[erperejildo]

Please, add it to Flutter's icons

[RubenD96]

<vector android:height="24dp" android:tint="#FFFFFF" android:viewportHeight="24" android:viewportWidth="24" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="@android:color/white" android:pathData="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z"/> </vector>

vector xml file for native android development

[erperejildo]

https://api.flutter.dev/flutter/material/Icons-class.html

For Flutter devs