Interface IconPropsWithName

interface IconPropsWithName {
    ariaHidden?: boolean;
    ariaLabel?: string;
    className?: string;
    color?: "currentColor" | (keyof FillColors);
    customAttribute?: {
        attribute: string;
        value: string | number;
    };
    embeddedIcon?: undefined;
    fontSize?: number | "inherit";
    isLoading?: boolean;
    name:
        | "search"
        | "information"
        | "calendar"
        | "change"
        | "document"
        | "download"
        | "luggage"
        | "open_in_new_tab"
        | "visibility"
        | "walk"
        | "web"
        | "image"
        | "filter"
        | "linkedin"
        | "accessibility"
        | "more"
        | "settings"
        | "track"
        | "menu"
        | "cancel"
        | "copy"
        | "pause"
        | "clear"
        | "time"
        | "stop"
        | "snow"
        | "help"
        | "move"
        | "done"
        | "warning"
        | "send"
        | "timer"
        | "email"
        | "home"
        | "work"
        | "resplus"
        | "bus"
        | "ferry"
        | "metro"
        | "taxi"
        | "carriage"
        | "seat"
        | "moon_small"
        | "ac_unit_off_small"
        | "ac_unit_small"
        | "accessibility_small"
        | "airplane_small"
        | "assistance_dog_small"
        | "bed_small"
        | "bicycle_off_small"
        | "bicycle_small"
        | "bistro_small"
        | "breakfast_off_small"
        | "breakfast_small"
        | "bus_small"
        | "cancel_small"
        | "car_small"
        | "catering_off_small"
        | "catering_small"
        | "changing_table_small"
        | "chevron_down_small"
        | "chevron_up_small"
        | "commuter_train_small"
        | "copy_small"
        | "dinner_service_off_small"
        | "dinner_service_small"
        | "done_small"
        | "send_small"
        | "drink_off_small"
        | "drink_small"
        | "eu_bus_small"
        | "eu_ship_small"
        | "eu_train_small"
        | "ferry_small"
        | "gift_small"
        | "guide_off_small"
        | "guide_small"
        | "heart_outlined_small"
        | "help_filled_small"
        | "help_small"
        | "information_filled_small"
        | "information_small"
        | "journey_path_small"
        | "long_distance_train_small"
        | "luggage_small"
        | "medal_small"
        | "metro_small"
        | "minus_small"
        | "more_small"
        | "offer_percentage_small"
        | "offer_small"
        | "open_in_new_tab_small"
        | "percentage_small"
        | "pets_off_small"
        | "pets_small"
        | "plus_large_small"
        | "plus_small"
        | "power_outlet_small"
        | "quiet_zone_small"
        | "seat_off_small"
        | "seat_small"
        | "second_class_calm_small"
        | "shower_small"
        | "soft_drink_small"
        | "stroller_small"
        | "sw_law_small"
        | "take_away_coffee_off_small"
        | "take_away_coffee_small"
        | "take_away_off_small"
        | "take_away_small"
        | "taxi_small"
        | "thermos_off_small"
        | "thermos_small"
        | "ticket_small"
        | "time_small"
        | "timer_small"
        | "tram_small"
        | "trefoil_small"
        | "walk_small"
        | "warning_filled_small"
        | "warning_small"
        | "wc_off_small"
        | "wc_small"
        | "wheelchair_small"
        | "wi_fi_off_small"
        | "wi_fi_small"
        | "work_small"
        | "environmental_message_illustration"
        | "error_illustration"
        | "in_development_illustration"
        | "my_profile_illustration"
        | "no_tickets_illustration"
        | "ticket_in_the_app_illustration"
        | "ac_unit"
        | "ac_unit_off"
        | "airplane"
        | "arrow_left"
        | "arrow_right"
        | "arrow_back"
        | "assistance_dog"
        | "attach"
        | "bed"
        | "bicycle"
        | "bicycle_off"
        | "bistro"
        | "breakfast"
        | "breakfast_off"
        | "camera"
        | "cancel_filled"
        | "car"
        | "card"
        | "card_icon"
        | "carriage_position"
        | "catering"
        | "catering_off"
        | "changing_table"
        | "chat"
        | "check_circle_checked"
        | "check_circle_unchecked"
        | "checkbox_checked"
        | "checkbox_indeterminate"
        | "checkbox_unchecked"
        | "chevron_down"
        | "chevron_left"
        | "chevron_right"
        | "chevron_up"
        | "chevron_up_down"
        | "cloudy"
        | "commuter_train"
        | "delete"
        | "dinner_service"
        | "dinner_service_off"
        | "done_filled_active"
        | "done_filled_inactive"
        | "drink"
        | "drink_off"
        | "easily_accessible_seat"
        | "edit"
        | "facebook"
        | "facebook_messenger"
        | "flag"
        | "gift"
        | "guide"
        | "guide_off"
        | "heart"
        | "heart_filled"
        | "heart_outlined"
        | "help_filled"
        | "information_filled"
        | "information_outlined"
        | "instagram"
        | "journey_path"
        | "language_english"
        | "language_norwegian"
        | "language_swedish"
        | "long_distance_train"
        | "medal"
        | "microphone"
        | "minus"
        | "mobile_phone"
        | "my_location"
        | "near_me"
        | "no_smoking"
        | "notification"
        | "offer"
        | "offer_percentage"
        | "partly_cloudy"
        | "percentage"
        | "pets"
        | "pets_off"
        | "phone"
        | "place"
        | "plus"
        | "plus_large"
        | "power_outlet"
        | "qrCode"
        | "quiet_zone"
        | "radio_button_checked"
        | "radio_button_unchecked"
        | "rain"
        | "refresh"
        | "school"
        | "scooter"
        | "seat_off"
        | "second_class_calm"
        | "share"
        | "share_ios"
        | "shopping_cart"
        | "shower"
        | "sidebar"
        | "sms"
        | "soft_drink"
        | "star"
        | "star_filled"
        | "stroller"
        | "swap"
        | "swap_horizontal"
        | "switch_checked"
        | "switch_unchecked"
        | "take_away_bag"
        | "take_away_bag_off"
        | "take_away_coffee"
        | "take_away_coffee_off"
        | "thermos"
        | "thermos_off"
        | "thunder"
        | "ticket"
        | "tram"
        | "traveller"
        | "trefoil"
        | "twitter"
        | "undo"
        | "visibility_off"
        | "warning_filled"
        | "wc"
        | "wc_off"
        | "wheelchair"
        | "wi_fi"
        | "wi_fi_off"
        | "windy"
        | "youtube"
        | "arrow_back_cropped";
    role?: "img";
    skeletonSx?: SxProps<Theme>;
    style?: CSSProperties;
    wrapped?: boolean;
}

Hierarchy (view full)

Properties

ariaHidden? ariaLabel? className? color? customAttribute? embeddedIcon? fontSize? isLoading? name role? skeletonSx? style? wrapped?

Properties

OptionalariaHidden

ariaHidden?: boolean

Aria hidden defaults to true

OptionalariaLabel

ariaLabel?: string

Aria-label for the icon (used in combination with role)

OptionalclassName

className?: string

Override or extend the styles applied to the component

Optionalcolor

color?: "currentColor" | (keyof FillColors)

Color of the icon.

OptionalcustomAttribute

customAttribute?: {
    attribute: string;
    value: string | number;
}

Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

OptionalembeddedIcon

embeddedIcon?: undefined

OptionalfontSize

fontSize?: number | "inherit"

Indicates the font size for the icon. Converts the number value from px to rem.

OptionalisLoading

isLoading?: boolean

If true, a loading skeleton will be rendered instead of the component.

name

name:
    | "search"
    | "information"
    | "calendar"
    | "change"
    | "document"
    | "download"
    | "luggage"
    | "open_in_new_tab"
    | "visibility"
    | "walk"
    | "web"
    | "image"
    | "filter"
    | "linkedin"
    | "accessibility"
    | "more"
    | "settings"
    | "track"
    | "menu"
    | "cancel"
    | "copy"
    | "pause"
    | "clear"
    | "time"
    | "stop"
    | "snow"
    | "help"
    | "move"
    | "done"
    | "warning"
    | "send"
    | "timer"
    | "email"
    | "home"
    | "work"
    | "resplus"
    | "bus"
    | "ferry"
    | "metro"
    | "taxi"
    | "carriage"
    | "seat"
    | "moon_small"
    | "ac_unit_off_small"
    | "ac_unit_small"
    | "accessibility_small"
    | "airplane_small"
    | "assistance_dog_small"
    | "bed_small"
    | "bicycle_off_small"
    | "bicycle_small"
    | "bistro_small"
    | "breakfast_off_small"
    | "breakfast_small"
    | "bus_small"
    | "cancel_small"
    | "car_small"
    | "catering_off_small"
    | "catering_small"
    | "changing_table_small"
    | "chevron_down_small"
    | "chevron_up_small"
    | "commuter_train_small"
    | "copy_small"
    | "dinner_service_off_small"
    | "dinner_service_small"
    | "done_small"
    | "send_small"
    | "drink_off_small"
    | "drink_small"
    | "eu_bus_small"
    | "eu_ship_small"
    | "eu_train_small"
    | "ferry_small"
    | "gift_small"
    | "guide_off_small"
    | "guide_small"
    | "heart_outlined_small"
    | "help_filled_small"
    | "help_small"
    | "information_filled_small"
    | "information_small"
    | "journey_path_small"
    | "long_distance_train_small"
    | "luggage_small"
    | "medal_small"
    | "metro_small"
    | "minus_small"
    | "more_small"
    | "offer_percentage_small"
    | "offer_small"
    | "open_in_new_tab_small"
    | "percentage_small"
    | "pets_off_small"
    | "pets_small"
    | "plus_large_small"
    | "plus_small"
    | "power_outlet_small"
    | "quiet_zone_small"
    | "seat_off_small"
    | "seat_small"
    | "second_class_calm_small"
    | "shower_small"
    | "soft_drink_small"
    | "stroller_small"
    | "sw_law_small"
    | "take_away_coffee_off_small"
    | "take_away_coffee_small"
    | "take_away_off_small"
    | "take_away_small"
    | "taxi_small"
    | "thermos_off_small"
    | "thermos_small"
    | "ticket_small"
    | "time_small"
    | "timer_small"
    | "tram_small"
    | "trefoil_small"
    | "walk_small"
    | "warning_filled_small"
    | "warning_small"
    | "wc_off_small"
    | "wc_small"
    | "wheelchair_small"
    | "wi_fi_off_small"
    | "wi_fi_small"
    | "work_small"
    | "environmental_message_illustration"
    | "error_illustration"
    | "in_development_illustration"
    | "my_profile_illustration"
    | "no_tickets_illustration"
    | "ticket_in_the_app_illustration"
    | "ac_unit"
    | "ac_unit_off"
    | "airplane"
    | "arrow_left"
    | "arrow_right"
    | "arrow_back"
    | "assistance_dog"
    | "attach"
    | "bed"
    | "bicycle"
    | "bicycle_off"
    | "bistro"
    | "breakfast"
    | "breakfast_off"
    | "camera"
    | "cancel_filled"
    | "car"
    | "card"
    | "card_icon"
    | "carriage_position"
    | "catering"
    | "catering_off"
    | "changing_table"
    | "chat"
    | "check_circle_checked"
    | "check_circle_unchecked"
    | "checkbox_checked"
    | "checkbox_indeterminate"
    | "checkbox_unchecked"
    | "chevron_down"
    | "chevron_left"
    | "chevron_right"
    | "chevron_up"
    | "chevron_up_down"
    | "cloudy"
    | "commuter_train"
    | "delete"
    | "dinner_service"
    | "dinner_service_off"
    | "done_filled_active"
    | "done_filled_inactive"
    | "drink"
    | "drink_off"
    | "easily_accessible_seat"
    | "edit"
    | "facebook"
    | "facebook_messenger"
    | "flag"
    | "gift"
    | "guide"
    | "guide_off"
    | "heart"
    | "heart_filled"
    | "heart_outlined"
    | "help_filled"
    | "information_filled"
    | "information_outlined"
    | "instagram"
    | "journey_path"
    | "language_english"
    | "language_norwegian"
    | "language_swedish"
    | "long_distance_train"
    | "medal"
    | "microphone"
    | "minus"
    | "mobile_phone"
    | "my_location"
    | "near_me"
    | "no_smoking"
    | "notification"
    | "offer"
    | "offer_percentage"
    | "partly_cloudy"
    | "percentage"
    | "pets"
    | "pets_off"
    | "phone"
    | "place"
    | "plus"
    | "plus_large"
    | "power_outlet"
    | "qrCode"
    | "quiet_zone"
    | "radio_button_checked"
    | "radio_button_unchecked"
    | "rain"
    | "refresh"
    | "school"
    | "scooter"
    | "seat_off"
    | "second_class_calm"
    | "share"
    | "share_ios"
    | "shopping_cart"
    | "shower"
    | "sidebar"
    | "sms"
    | "soft_drink"
    | "star"
    | "star_filled"
    | "stroller"
    | "swap"
    | "swap_horizontal"
    | "switch_checked"
    | "switch_unchecked"
    | "take_away_bag"
    | "take_away_bag_off"
    | "take_away_coffee"
    | "take_away_coffee_off"
    | "thermos"
    | "thermos_off"
    | "thunder"
    | "ticket"
    | "tram"
    | "traveller"
    | "trefoil"
    | "twitter"
    | "undo"
    | "visibility_off"
    | "warning_filled"
    | "wc"
    | "wc_off"
    | "wheelchair"
    | "wi_fi"
    | "wi_fi_off"
    | "windy"
    | "youtube"
    | "arrow_back_cropped"

Specifies the name of the icon to be displayed.

Optionalrole

role

The ARIA role of the icon.

OptionalskeletonSx

skeletonSx?: SxProps<Theme>

Optional CSS properties to style the icon skeleton. This prop allows you to customize the icon's appearance.

Optionalstyle

style?: CSSProperties

Optional CSS properties to style the icon. This prop allows you to customize the icon's appearance.

Optionalwrapped

wrapped?: boolean

Return svg without wrapping box.

Settings

Member Visibility

On This Page

Properties